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