在导航栏内居中图像

Question

此代码非常适合在导航栏只是文本时居中。水平和垂直。

但是当我尝试使用家庭图像（房屋图像）时 - 它会偏移并且不再垂直居中于中间。

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

Answer 1

如果添加.navt img { vertical-align: middle; }，则会使图像垂直对齐文本。

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