0 
<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

4

2 回答 2

1

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

你也可以保持line-height这种方式。

于 2013-02-08T16:58:20.800 回答
1

假设你想保持你line-height: 70px的，.nav穿上height: 70px;。.icon-home

于 2013-02-08T17:00:21.510 回答