Skip to main content
2 de 2
se eliminaron 23 caracteres en el cuerpo
Shaz
  • 29.2k
  • 18
  • 40
  • 61

Centrar ul dentro de un div (CSS)

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

Dimoreno
  • 957
  • 6
  • 19
  • 36