html - 水平导航栏中的文本(使用 ul 和 li)未垂直居中

Question

更新 在仔细研究之后，我找到了一种方法，将 span 文本替换为 div，然后设置它风格:

.navItem div {
    display: inline-block;
    vertical-align: middle;
}

虽然不确定这是否是最好的方式......一切都感觉很乱

---

我一直在尝试创建这个导航栏，但我遇到了一个问题，其中的文本没有完全垂直居中:

    .navBar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height:54px;
        background-color: #DADADA;
        color: white;
    }
    
    .navItem {
        display: inline;
        float: left;
        color: rgb(29, 29, 29);
        font-size: 14px;
        height: 54px;
    }
    
    .navItem a {
        display: block;
        height: 54px;
        padding-left: 10px;
        color: rgb(29, 29, 29);
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        transition: color .25s, background .25s;
        text-decoration: none;
    }
    
    .navItem img {
        vertical-align: middle;
    }
    
    .navIcon {
        height: 34px;
        width: 34px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

      <ul class="navBar">
        <li class="navItem">
          <a>
            <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
            <span>About</span>
          </a>
        </li>
        <li class="navItem">
          <a>
            <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
            <span>Updates</span>
          </a>
        </li>
      </ul>

我也知道我的 CSS 可能看起来很有趣。它包含来自至少 3 个不同来源的关于如何创建水平导航栏的文章。

我在栏中将图标居中时遇到了问题，所以您可以看到我只是手动向图标添加填充以强制其居中。

vertical-align: center 什么都没做

Answer 1

这是一个更清晰的版本，包括 CSS 和 HTML。当您有一个非常好的选择器(可能应该是一个 ID，但这是另一个问题)作为基础时，没有理由在内部元素上使用类。它还使用可变大小，因此即使人们不完全使用您希望他们用于缩放、大小等的内容，它也能正常工作。

.navBar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height:3.5em;
        background-color: #DADADA;
        color: white;
    }
    
    .navBar li {
        display: inline-block;
        color: rgb(29, 29, 29);
        font-size: 0.9em;
        margin: 0.2em;
    }
    
    .navBar li a {
        display: block;
        padding-left: 0.8em;
        color: rgb(29, 29, 29);
        text-align: center;
        cursor: pointer;
        transition: color .25s, background .25s;
        text-decoration: none;
    }
    .navBar li img {
        height: 2.5em;
        width: 2.5em;
      vertical-align: middle;
    }
.navBar li span {
  line-height: 3.5em;
  margin-left: .5em;
  }

<ul class="navBar">
        <li>
          <a>
            <img src="http://image.flaticon.com/icons/svg/297/297562.svg"><span>About</span>
          </a>
        </li>
        <li>
          <a>
            <img src="http://image.flaticon.com/icons/svg/297/297562.svg"><span>Updates</span>
          </a>
        </li>
      </ul>