Centering Image Inside Navigation Bar - css

Question

This code works great for centering a Navigation Bar when it is just text. Both Horizontally and Vertically.
But when I try use an image for the Home (house image) - it offsets and is 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>This
</li>
<li>And
</li>
<li>That
</li>
<li>Here
</li>
<li>There
</li>
</ul>

Answer 1

If you add .navt img { vertical-align: middle; } you make the image align vertically in regards to the text.
.navt {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: black;
}
.navt li {
display: inline;
}
.navt a {
display: inline-block;
padding: 0 12px;
font-weight: normal;
color: white;
height: 44px;
line-height: 44px;
}
.navt li a:hover {
color: white;
background-color: pink;
}
.navt img {
vertical-align: middle;
}
<ul class="navt">
<li>
<a href="_index.cfm">
<img src="../images/hm_wht_tr30.png" height="20" border="0">
</a>
</li>
<li>This
</li>
<li>And
</li>
<li>That
</li>
<li>Here
</li>
<li>There
</li>
</ul>