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>

メニューの幅は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 を使用して同じことを行います。