juan santiago velasco juan santiago velasco - 29 days ago 8
CSS Question

Align text inside navigation bar

Hi can someone help me align the texts inside li, I tried vertical-align: middle; but it doesn't seem to work. Here is my code. I will also post some image for reference.

Here is my HTML code.

`<div class="wrapper">
<div class="custom-header">
<div id="menu">
<div class="menu-content">
<ul>
<li class="logo"><img src="" alt=""></li>
<li><a href="#" title="Racing Games">Racing</a></li>
<li><a href="#" title="Bike Games">Bike</a></li>
<li><a href="#" title="Car Parking Games">Car Parking</a></li>
</ul>
</div>
</div>
</div>
</div>`


And here is my CSS code.

`#menu {
clear: both;
border-color: #004F7B;
background-color: #414446;
border-width: 1px 0px 0px;
border-style: solid;
width: 100%;
text-align: center;
overflow: hidden;
height: 120px;
position: absolute;
z-index: 1000;
}

#menu .menu-content {
text-align: center;
max-width: 980px;
margin: 0px auto;
color: white;
line-height: 70px;
font-size: 1.5em;
}

#menu li {
float: left;
width: 200px;
}

#menu ul, li {
list-style-type: none;
}

#menu li a {
color: #E5EAED;
text-transform: uppercase;
text-decoration: none;
float: left;
display: inline;
padding: 0px 30px;
height: 60px;
margin: 10px 1px 0px;
line-height: 60px;
}

#menu li.logo {
margin: 0px 190px 0px -40px;
width: 180px;
text-align: center;
}`


Here is the image

Answer

As i understand from the image you provided, you are trying to maintain equal distance between text and you have given width 200px to li and that is why you text is not aligning properly. Try below css , hope this will help you.

		#menu {
      clear: both;
      border-color: #004F7B;
      background-color: #414446;
      border-width: 1px 0px 0px;
      border-style: solid;
      width: 100%;
      text-align: center;
      overflow: hidden;
      height: 120px;
      position: absolute;
      z-index: 1000;
  }

 #menu .menu-content {
     text-align: center;
     max-width: 980px;
     margin: 0px auto;
     color: white;
     line-height: 70px;
     font-size: 1.5em;
}

#menu li {
     float: left;
     width: auto;
     text-align: center;
}

#menu ul, li {
    list-style-type: none;
}

#menu li a {
   color: #E5EAED;
   text-transform: uppercase;
   text-decoration: none;
   float: none;
   display: inline;
   padding: 0px 30px;
   height: 60px;
   margin: 10px 1px 0px;
   line-height: 60px;
}

#menu li.logo {
   margin: 0px 190px 0px -40px;
   width: 180px;
   text-align: center;
}
	<div class="wrapper">
  <div class="custom-header">
   <div id="menu">
     <div class="menu-content">
       <ul>
         <li class="logo"><img src="" alt=""></li>
         <li><a href="#" title="Racing Games">Racing</a></li>
         <li><a href="#" title="Bike Games">Bike</a></li>
         <li><a href="#" title="Car Parking Games">Car Parking</a></li>
       </ul>
    </div>
   </div>
   </div>
 </div>

Comments