This particular code snippet is very useful for centering a Navigation Bar that consists of text both horizontally and vertically.
However, the issue arises when attempting to use an image, such as a house icon for the Home button. This causes the navigation bar to become offset and no longer centered in the middle vertically.
.navt {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: black;
}
.navt li {
display: inline;
}
.navt a {
display: inline-block;
padding: 12px;
font-weight: normal;
color: white;
}
.navt li a:hover {
color: white;
background-color: pink;
}<ul class="navt">
<li>
<a href="_index.cfm">
<img src="../images/hm_wht_tr30.png" height="20" border="0">
</a>
</li>
<li><a href="page.cfm">This</a>
</li>
<li><a href="page.cfm">And</a>
</li>
<li><a href="page.cfm">That</a>
</li>
<li><a href="page.cfm">Here</a>
</li>
<li><a href="page.cfm">There</a>
</li>
</ul>