如何在导航栏中的<li>元素内对齐文本？

Question

有人可以帮助我调整li内的文字吗？我试过了vertical-align: middle;，但它似乎没有效果。 这是我的代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是供参考的图片：

Answer 1

正如我从您提供的图像中了解到的那样，您正在尝试保持文本之间的距离相等，并且您已经将宽度设置为200px，这就是文本未正确对齐的原因。试试下面的CSS，希望这对你有所帮助。

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

Answer 2

您可以考虑使用display：flex

＆＃13;

＆＃13;

#menu {
  border-color: #004F7B;
  background-color: #414446;
  border-width: 1px 0px 0px;
  border-style: solid;
  
}
#menu .menu-content {
   
} 
.menu-content ul {
 display: flex;
  justify-content:center;
}

.menu-content ul li {
  list-style-type: none;
  margin:25px;
 
}
#menu li a {
   color: #E5EAED;
   text-transform: uppercase;
   text-decoration: none;
}

#menu li.logo {
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助