<a> in <li> menu</li></a>的中间垂直对齐

时间:2012-08-31 07:23:21

标签: html css

我需要在菜单的中间标签中垂直对齐。另外如果客户端会更改标签的值,它会分成两行,它将保持在中间位置。我知道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

处工作原型

3 个答案:

答案 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;
}

示例小提琴:http://jsbin.com/ohazot/1/edit