html - inの中央の垂直方向の位置合わせメニュー

Question

メニューの中央のラベルを垂直方向に揃える必要があります。また、クライアントがラベルの値を変更して 2 行に分割された場合は、真ん中に留まります。私が知っているように、vertical-align: middle はテーブル セルに対して機能しますが、<li>要素からメニューを生成する必要があります。以下のコード例を参照してください。

html

  <ul>
    <li><a href="#">qwe</a></li>
    <li><a href="#">asd</a></li>
    <li><a href="#">zxcvbnm asdfgh</a></li>
  </ul>

CSS

ul {
  list-style: none;
}
li {
  float:left;
  border: 1px solid;
  margin: 1px;
  height: 60px;
  width: 60px;
  background: tomato;
  text-align: center;
  vertical-align: middle;  
}
a {
  vertical-align: middle;
}

そしてjsbinでの作業プロトタイプ

Answer 1

こんにちは、lidisplay:table-cellに渡して削除します float:left

このように

    li {
     display:table-cell;
       vertical-align: middle;
float:left; // remove this line  
    }

デモ

Answer 2

タグに追加line-height:60pxするだけで機能します。a

デモを見る

Answer 3

要素に使用display: inline-blockします。<a>

ul {
  list-style: none;
}
li {
  float:left;
  border: 1px solid;
  margin: 1px;
  height: 60px;
  line-height: 60px;
  width: 60px;
  background: tomato;
  text-align: center;
  vertical-align: middle;  
}
a {
  vertical-align: middle;
  display: inline-block;
  line-height: normal;
}

フィドルの例: http://jsbin.com/ohazot/1/edit