Center ul within a div (CSS)

Navigation
1

I have the following div which contains a background image and in the lower part a menu, my question is how can I center the items of my menu across the width of my screen, these are currently shown on the left.

this is my code: 

<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;
}

Finally I share my jsfiddle div-example

    
asked by Dimoreno 29.10.2017 в 05:59
source

2 answers

1

A quick solution is with Flexbox, adding two lines of CSS to the class in the list <ul class="barra_horizontal_ul"> .

In the first line added display: flex; we define a container flexbox, and in the second justify-content: space-around; we tell that container that its "internal" elements, in this case the <li> will have space around each one of them equal to the division between the total space not used in the line or container, divided by the number of elements contained and finally divided in two, and that space is added to each side of each element. 

.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>
    
answered by 29.10.2017 / 07:14
source
0

To center elements on a screen and also be any screen size, if you are not using bootstrap, you would use the @media query of css

link

You put in your div class="row" and in each list menu you give the size you want with col-3 col-m-3 or whatever you want and it stays centered for any screen size.

    
answered by 29.10.2017 в 09:18
How to fix It does not allow me to modify android: layout_height in a LinearLayout Count base frequency in record file