html - 在菜单中垂直对齐

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>

菜单的宽度固定为 720 像素，高度固定为 50 像素。我怎样才能使菜单项像这张图片一样？

这是我的 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