Question

我有一个带css的导航菜单。我尝试垂直和水平居中li元素。我让它们水平居中，但不能让它们垂直居中......特别是因为它们可以是多线的（即：Bath＆amp;
Kitchen）与单线（即：Plumbing）......

CSS：

 #menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center;
 }

 #menu li {
      float: left; 
      position: relative; 
      width: 75px; 
      height: 30px; 
      margin-right: 2px; 
      background-color: #994708;
 }

 #menu li a {
      color: #FFFFFF; 
      display: block; 
      position: relative; 
      vertical-align: middle;
      width: 75px; 
      height: 30px; 
      font-size: 11px; 
      line-height: 12px; 
      text-transform: uppercase; 
      text-decoration: none;
 }

HTML：

  <ul id="menu">
      <li><a href="#">All<br />Products</a></li>
      <li><a href="#">New<br />Products</a></li>
      <li><a href="#">Plumbing</a></li>
      <li><a href="#">Bath &<br />Kitchen</a></li>
  </ul>

任何帮助或想法将不胜感激！感谢。

Answer 1

将top: 40%;添加到#menu li a。更新了jsFiddle。

Answer 2

试试这个链接，我对代码做了几处修改，我认为唯一的方法就是应用一个特殊的类。

Demo

Answer 3

试试这个：

#menu li {
      float: left; 
      position: relative; 
      margin-right:2px;   <--removed redundant entries, moved some to A
}

#menu li a {
      color: #FFFFFF; 
      background-color: #994708;
      display: table-cell;    <--- added this
      vertical-align: middle;
      width: 75px; 
      height: 30px; 
      font-size: 11px; 
      line-height: 12px;
      text-transform: uppercase; 
      text-decoration: none;
 }

Answer 4

我添加了一个特殊的类来处理单行菜单项。我刚刚在数据绑定中编写了一些代码，并检查文本中是否存在“换行符”。如果是这样，请应用特殊类。

CSS导航菜单垂直中心<li> s </li>

4 个答案: