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

Posted 2023-05-07

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

【英文标题】：Centering vertical in header navbar [duplicate]

【发布时间】：2016-09-16 10:29:10

【问题描述】：

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

#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"   >
  </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锚标签下推几个像素？

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

【问题讨论】：

制作一个 jsFiddle 来帮助我们理解您的问题

你会认为对于像这样的垂直对齐元素会有一个合适的欺骗......但是，在与边缘相关的问题的海洋中很难找到。经验

【参考方案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"   >
        </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>

【讨论】：

认真的吗？回答这个问题？连你的答案都不对。

@PraveenKumar - 我认为帮助用户没有问题。答案有什么问题？

@PraveenKumar 你回答了这个one，如果你是在暗示，那很简单，应该是评论。它不是太宽泛。人们通过创建大量布局使其过于宽泛。在这种情况下不需要那个，简单的vertical-align就是解决方案

@Serlite 即使这种方法似乎并没有真正将图像与其余内容对齐。它不是居中的。比以前好多了，所以我会用它。

@EricS 实际上，您需要将vertical-align:middle 应用于图像和图像旁边的锚标记。正在为此写一个答案，但不确定我是否应该发布它。 （如果需要，请告诉我。）

【参考方案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"   >
  </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>

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

【讨论】：

这就是我所缺少的。在发布这个问题之前，我尝试将垂直对齐：中间添加到 img 并注意到它仍然没有居中。没有意识到我也需要将它添加到文本中。现在完美运行！

【参考方案3】：

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

a img
   vertical-align:middle

【参考方案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"   >
        </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>

【讨论】：

添加 jQuery、Bootstrap CSS 以及火箭发射器代码。 :P 伙计，当你可以使用vertical-align 实现它时，你为什么需要把事情复杂化？

@PraveenKumar 好吧...我不喜欢使用库来实现这种方法。我只是提出了另一种与j08691 不同的新CSS 解决方案。

@PraveenKumar 是的，我知道。我只是在关注您的游戏:) 是的，我认为拥有不同的解决方案并让 OP 选择最好的解决方案始终是一种好方法。当然，在这种情况下，可以用一行来解决，这可能有点多余。