我需要在菜单的中间标签中垂直对齐。另外如果客户端会更改标签的值,它会分成两行,它将保持在中间位置。我知道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;
}
处工作原型
答案 0 :(得分:5)
您好现在给李display:table-cell
和删除 float:left
就像这样
li {
display:table-cell;
vertical-align: middle;
float:left; // remove this line
}
的 Demo 强> 的
答案 1 :(得分:0)
只需将line-height:60px
添加到您的a
代码即可。
<强> See Demo 强>
答案 2 :(得分:0)
对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;
}