html - 有没有办法将 Logo 对齐到导航栏的中心？

Question

目前我可以将 Logo 添加到导航栏，但它似乎从与文本相同的高度开始，导致它不在垂直中间。

https://i.imgur.com/Av52Bc9.png

我在类里面尝试了一些不同的对齐方式，但是没有一个奏效。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
         <a class="navbar-brand" href="Home">
             <img src="https://i.imgur.com/hTiYNNe.png" width="53" height="35" class="d-inline-block align-top ml-2" alt="">
             <li>@Html.ActionLink("About", "About", "Home")</li>
             <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
     </ul>
</div>

我希望出现的是 Logo 作为一种“主页​​”按钮，它可以工作，但它不居中。

Answer 1

这是 flexbox 的 align-items: center 属性的完美用例。它相对于父容器垂直居中其 flex 子容器。

HTML

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
         <li><a class="navbar-brand" href="Home">
             <img src="https://i.imgur.com/hTiYNNe.png" width="53" height="35" class="d-inline-block align-top ml-2" alt=""/></a></li>
             <li>About</li>
             <li>Contact</li>
           </ul>
     </ul>
</div>

CSS

.nav {
  display: flex;
  list-style: none;
  padding: 16px 32px;
  justify-content: space-between;
  align-items: center;
  height: 75px;
  background-color: red;
}

我已经清理了您的 HTML 并添加了一些非常基本的样式来进行演示。

有关工作示例，请参见此处: https://codepen.io/anon/pen/QPdzMN

但这看起来像是一个 Bootstrap 元素。 Bootstrap 3？所以您可能不希望覆盖默认样式。是这样吗？