<ul class="navBar">
<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>
.navBar {
line-height: 70px;
margin: 0;
padding: 0;
border: 0;
}
.navBar 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(https://i.sstatic.net/MNme0.png) no-repeat;
width: 16px;
height: 14px;
display:block;
}
body {
background: gray;
}
Is there a way to make the background of .active fill the entire height of the li and center the icon? The current demo does not obey the line-height of the li.