html - 菜单中 的中间垂直对齐

Question

我需要在菜单的中间标签中垂直对齐。此外，如果客户端将更改标签的值并且它将分成两行，它将保持在中间。据我所知，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;
}

工作原型(prototype)在 jsbin

Answer 1

你好，现在给 li display:table-cell 和 remove float:left

像这样

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

Demo