中间垂直对齐<a>in</a><li> <a>菜单</a>

Question

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

嗨，现在给 li display:table-cell并删除float:left

像这样

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

演示

Answer 2

只需将line-height:60px添加到您的a标签中即可。

看演示

Answer 3

对<a>元素使用display: inline-block 。

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

Answer 4

在li上使用display:flex和align-items:center ：

 ul { background-color: #e39400; height: 50px; display: flex; flex-direction: col; } li { display: flex; align-items: center; width: 30%; list-style: none; } a { color:white; } 

 <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> 

如果要居中的文本，然后使用margin:auto上的a标签。