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 に答える