css - 导航栏内的居中图像

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>