水平导航栏中的文本（使用 ul 和 li）未垂直居中

Question

Update 仔细研究后，我找到了一种方法，将 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

如果你不浮动li，那么你可以从他们那里做vertical-align。

.navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 54px;
  background-color: #DADADA;
  color: white;
  line-height: 54px;
  /* to set li in the middle*/
}
.navItem {
  display: inline-block;
  color: rgb(29, 29, 29);
  font-size: 14px;
  vertical-align: middle;
  /* here it does what you look for */
  line-height: 1.2em;
  /* reset line-height to a nomal value */
}
.navItem a {
  display: block;
  /* whatever display you want */
  padding-left: 10px;
  color: rgb(29, 29, 29);
  text-align: center;
  /* why ? */
  cursor: pointer;
  transition: color .25s, background .25s;
  text-decoration: none;
}
.navItem img {
  vertical-align: middle;
  /* aside text */
}
.navIcon {
  height: 34px;
  width: 34px;
}
/* eventually */

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

<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>
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>display on span <br/>can be useful too</span>
    </a>
  </li>
</ul>

相同，不使用 line-height ( @PhiterFernandes ) 但只是伪设置问题中所述的初始 54px 高度。

.navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 54px;
  background-color: #DADADA;
  color: white;
}
.navBar:before {
  content: '';
  padding-top: 54px;
}
/* commun style */

.navBar:before,
.navItem,
.navItem img,
.navItem a span {
  vertical-align: middle;
  display: inline-block;
}
.navItem {
  color: rgb(29, 29, 29);
  font-size: 14px;
}
.navItem a {
  padding-left: 10px;
  color: rgb(29, 29, 29);
  transition: color .25s, background .25s;
  text-decoration: none;
}
.navIcon {
  height: 34px;
  width: 34px;
}

<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>
  <li class="navItem">
    <a>
      <img class="navIcon" src="http://image.flaticon.com/icons/svg/297/297562.svg">
      <span>display on span <br/>can be useful too</span>
    </a>
  </li>
</ul>

Answer 2

这是一个更清晰的版本，适用于 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>

水平导航栏中的文本（使用 ul 和 li）未垂直居中

Text in a horizontal nav bar (using ul and li) isn't vertically centered

html

css

navbar