Tengo el siguiente div el cual contiene una imagen de fondo y en la parte inferior un menu, mi pregunta es como puedo centrar los items de mi menu en todo el ancho de mi pantalla, actualmente estos se muestran a la izquierda.
este es mi codigo:
<div class="principal movil_principal">
<div class="fondo_principal">
<div id="barra_horizontal_login">
<ul class="barra_horizontal_ul">
<li class="barra_horizontal_li">
<a href><i class="material-icons">help</i> Dato informativo</a>
</li>
<li class="barra_horizontal_li">
<a href><i class="material-icons">help</i> Dato informativo</a>
</li>
<li class="barra_horizontal_li">
<a href><i class="material-icons">help</i> Dato informativo</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.principal{
background-image: url('https://www.oxmoorhyundai.com/wp-content/themes/DealerInspireDealerTheme/images/video-fallback-background.jpg');
background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
margin: 0 auto 1em;
padding-top: 25%;
position: relative;
}
.fondo_principal{
background-color: rgba(66, 66, 66, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#barra_horizontal_login{
width: 100%;
position: absolute;
bottom: 0;
right: 0;
}
.barra_horizontal_ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0,0,0,0.3);
}
.barra_horizontal_li{
float: left;
}
.barra_horizontal_li a{
color: #bdbdbd;
display: block;
font-size: 10px;
text-align: center;
padding: 10px;
text-decoration: none;
display: inline-flex;
vertical-align: middle;
}
.barra_horizontal_li a:hover{
color: #424242;
}
.barra_horizontal_li i{
color: #bdbdbd;
font-size: 13px;
}
Finalmente les comparto mi jsfiddle div-ejemplo