1

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

2 respuestas 2

1

Una solución rápida es con Flexbox, agregando dos líneas de CSS a la clase de la lista <ul class="barra_horizontal_ul">.

En la primera línea agregada display: flex; definimos un contenedor flexbox, y en la segunda justify-content: space-around; le decimos a dicho contenedor que sus elementos "internos", en este caso los <li> van a tener espacio alrededor de cada uno de ellos igual a la división entre el espacio total no utilizado en la línea o contenedor, dividido entre el número de elementos contenidos y finalmente dividido en dos, y se agrega dicho espacio a lado y lado de cada uno de los elementos.

.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);
  display: flex;
  justify-content: space-around;
  
}
.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;
}
<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>

1
  • Muchas Gracias @Shaz
    – Dimoreno
    Commented el 29 oct. 2017 a las 19:49
0

Para centrar elementos en una pantalla y que además sea cualquier tamaño de pantalla, sino estás usando bootstrap usaría las @media query de css

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Pones en tu div class="row" y en cada menú de lista le das el tamaño que quieras con col-3 col-m-3 o lo que quieras y se te queda centrado para cualquier tamaño de pantalla.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.