juan santiago velasco juan santiago velasco - 1 month ago 9
CSS Question

How can I align text inside an <li> element in a navigation bar?

Can someone help me align the text inside

li
? I tried
vertical-align: middle;
but it doesn't seem to work.
Here is my 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;
}

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





Here is an image for reference:

reference 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>