在标题导航栏中垂直居中[重复]

Question

我在标题中创建了一个导航栏，并将其与另一个元素对齐，以便它们居中。但是，将图像添加到标题后，其中一个元素不再居中：

#header nav {
  display: inline;
}
#header {
  background: #5D6D63;
  padding: 28px 0 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
#header nav ul {
  float: right;
  margin: 0px;
  margin-right: 100px;
}
li {
  list-style-type: none;
  float: left;
  margin-left: 46px;
}
a[href^="#"] {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none
}
a[href="#top"] {
  margin-left: 100px;
}

<header id="header">
  <a href="#top">Name</a>
  <a href="https://github.com/">
    <img src="assets/imgs/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
  </a>
  <nav id="navbar">
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</header>

问题是名称锚标记的垂直对齐方式。它应该以 github 图像和导航栏为中心。如果我删除 github 图像，它可以正常工作并且对齐。为什么github图片导致Name锚标签下推几个像素？

这里有图片显示它未对齐（有图像）和对齐（没有图像）

Answer 1

因为内联元素的默认vertical alignment 是baseline，而您想要middle。所以添加如下规则：

img {
  vertical-align:middle;
}

#header nav{
    display:inline;
}
#header {
    background: #5D6D63;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}
#header nav ul {
    float: right;
    margin: 0px;
    margin-right: 100px;
}
li {
    list-style-type: none;
    float: left;
    margin-left: 46px; 
}
a[href^="#"]{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none
}

a[href="#top"] {
    margin-left:100px;
}
img {
  vertical-align:middle;
}

 <header id="header"> 
        <a href="#top">Name</a>
        <a href="https://github.com/">
            <img src="http://www.uoyabause.org/images/logos/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
        </a>
        <nav id="navbar">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>       
          </ul>
        </nav>
    </header>

Answer 2

正如 j08691（和其他人）所提到的，您要查找的属性是 vertical-align:middle。

但是，需要注意的是：您必须记住，默认情况下，图像和旁边的锚标记都有 vertical-align:baseline - 意思是，如果您仅将其中一个垂直居中，则其基线将与中心垂直对齐的兄弟元素，而不是它的中间。 （根据您将其应用于哪个元素，这可能会恶化您的对齐问题。）

以下是您需要的修改/添加的样式块：

a[href="#top"] {
  margin-left: 100px;
  vertical-align: middle;
}
#header img {
  vertical-align: middle;
}

#header nav {
  display: inline;
}
#header {
  background: #5D6D63;
  padding: 28px 0 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
#header nav ul {
  float: right;
  margin: 0px;
  margin-right: 100px;
}
li {
  list-style-type: none;
  float: left;
  margin-left: 46px;
}
a[href^="#"] {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none
}
a[href="#top"] {
  margin-left: 100px;
  vertical-align: middle;
}
#header img {
  vertical-align: middle;
}

<header id="header">
  <a href="#top">Name</a>
  <a href="https://github.com/">
    <img src="assets/imgs/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
  </a>
  <nav id="navbar">
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</header>

希望这会有所帮助！如果您有任何问题，请告诉我。

Answer 3

使图像垂直对齐： 像这样添加CSS：

a img{
   vertical-align:middle
}

Answer 4

您可以将#header 显示为flex 并使用align-content: center;。

#header nav{
    display:inline;
}
#header {
    display: flex; /* NEW: Makes the container as flexbox */
    align-content: center; /* NEW: Center the items inside the container vertically */
    background: #5D6D63;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}
#header nav ul {
    float: right;
    margin: 0px;
    margin-right: 100px;
}
li {
    list-style-type: none;
    float: left;
    margin-left: 46px; 
}
a[href^="#"]{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none
}

a[href="#top"] {
    margin-left:100px;
}

<header id="header"> 
        <a href="#top">Name</a>
        <a href="https://github.com/">
            <img src="http://www.uoyabause.org/images/logos/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
        </a>
        <nav id="navbar">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>       
          </ul>
        </nav>
    </header>