CSS导航菜单垂直中心<；李>；s

我有一个带有css的导航菜单。我正在尝试垂直和水平居中的li元素。 我让他们水平居中，但不能让他们垂直居中。。。特别是因为它们可以是多线（即：浴室和厨房）而不是单线（即：管道）

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

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

HTML:

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

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

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

---

谢谢。

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

试试这个：

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

#菜单li{
浮动：左；
位置：相对位置；
右边距：2px；将
top:40%；
添加到
#菜单LIA
。已更新。
我添加了一个特殊类来处理单行菜单项。我只是在数据绑定中编写了一些代码，并检查是否存在“换行”在文本中。如果是这样，请应用特殊类。
感谢您的回复，我正在尽可能避免使用特殊类，因为此菜单将由数据库驱动。还有其他想法吗？SKS的方法可能是一个解决方案，但不会有最佳设计结果。谢谢，但这并不是真正的中心。我看到单线和多线保持一致。