菜单中的垂直对齐

Question

我的菜单结构是

 <div id="menu">
  <ul>
     <li><a href="#"><span>Two Words</span></a></li>
     <li><a href="#"><span>Three Words</span></a></li>
     <li><a href="#"><span>Very Long menu item</span></a></li>
     <li><a href="#"><span>Short word</span></a></li>
     <li><a href="#"><span>item5</span></a></li>
     <li><a href="#"><span>item6</span></a></li>
  </ul>
 </div>

菜单的固定宽度为720px，固定高度为50px。如何在此图像上制作菜单项？

这是我的CSS

#menu {width:720px; height:50px; }
#menu ul {margin:0px; padding:0px;}
#menu ul li {display:inline; float:left; margin-left:1px;}
#menu ul li a {display:block; width:119px; height:100%;}                
#menu ul li a span {display:inline-block;vertical-align:middle;
background-color:gray; text-align:center; font-size: 14px; width:100%;}

Answer 1

这是一个开端：

#menu {
    border: 1px solid #0000ff;
    padding: 10px;
}

ul li {
    border: 1px solid #ff0000;
    display: table-cell;
    height: 80px;
    margin: 10px 5px;
    text-align: center;
    width: 80px;
    vertical-align: middle;
}

jsfiddle

Answer 2

在您创建的span标记中使用text-align =“center”，或使用css执行相同操作。