<ul class="nav">
    <li><a href="#"><i class="icon-home"></i></a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Elements</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

.nav {
  line-height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
}
.nav li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  display: inline;
  float: left;
  padding-left: 4px;
  padding-right: 4px;
}
.active {
  background: pink;
}
.icon-home {
  background: url(http://i.stack.imgur.com/MNme0.png) no-repeat;
  width: 16px;
  height: 14px;
  display:block;
}
body {
  background: gray;
}


如何使.active的背景占据li的整个高度并使图标居中?如果您查看演示,则它不符合li的行高。

演示:http://codepen.io/anon/pen/ulEGw

最佳答案

您可以将.icon-home设置为display: inline-block;,这将使它与其余文本垂直居中。

您也可以这样保存您的line-height

07-24 09:47
查看更多