如何垂直居中导航栏内的所有元素？

Question

以this示例为起点，我正在尝试创建一个具有左对齐和右对齐部分的导航栏，确保其中所有元素垂直居中对齐。
不幸的是，右边的部分没有垂直居中，即使 right-aligned 和 left-aligned 类都设置了 vertical-align: middle 属性。我缺少什么？这是代码组：

header img {
          display: inline-block;
        }
        header nav {
          display: inline-block;
          font-size: 1em;
          vertical-align: middle;
        }
        header nav ul {
          padding: 0;
          margin: 0;
        }
        header nav ul img {
          vertical-align: middle;
        }
        header nav li {
          display: inline-block;
        }
        header nav li a {
          display: inline-block;
          padding: .4em .8em;
         font-size: 1em;
         text-decoration: none;
         color: black;
          background: #eee;
         line-height: 1;
        }
        header .container {
          max-width: 800px;
          margin: auto;
          overflow: hidden;
        }
        .left-aligned {
          float: left;
        }
        .right-aligned {
          float: right;
        }

<html>
  <body>
    <header role="banner">
      <div class="container">
        <div class="left-aligned">
          <img class="left" src="http://placehold.it/200x200">
        </div>
        <div class="right-aligned">
          <nav id="navigation" role="navigation">
            <ul>
              <li>
                <img src="http://placehold.it/100x100">
                <a href="#" title="About Us">About Us</a>
              </li>
              <li><a href="#" title="Biographies">Biographies</a></li>
              <li><a href="#" title="Services">Services</a></li>
              <li><a href="#" title="Careers">Careers</a></li>
              <li><a href="#" title="Contact">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
  </body>
</html>

Answer 1

这是 flexbox 的一个很好的用例 - 通过将以下三行添加到您的容器 class，您可以实现左右对齐的部分：

display: flex;
justify-content: space-between;
align-items: center;

因此您的最终代码将如下所示（为了便于阅读，我将 HTML 和 CSS 分开）：

header img {
      display: inline-block;
    }
    header nav {
      display: inline-block;
      font-size: 1em;
    }
    header nav ul {
      padding: 0;
      margin: 0;
    }
    header nav ul img {
      vertical-align: middle;
    }
    header nav li {
      display: inline-block;
    }
    header nav li a {
      display: inline-block;
      padding: .4em .8em;
      font-size: 1em;
      text-decoration: none;
      color: black;
      background: #eee;
      line-height: 1;
    }
    header .container {
      max-width: 800px;
      margin: auto;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

<header role="banner">
  
  <div class="container">
    
    <div class="left-aligned">
      <img class="left" src="http://placehold.it/200x200">
    </div>
    
    <div class="right-aligned">
      <nav id="navigation" role="navigation">
        <ul>
          <li>
            <img src="http://placehold.it/100x100">
            <a href="#" title="About Us">About Us</a>
          </li>
          <li><a href="#" title="Biographies">Biographies</a></li>
          <li><a href="#" title="Services">Services</a></li>
          <li><a href="#" title="Careers">Careers</a></li>
          <li><a href="#" title="Contact">Contact</a></li>
        </ul>
      </nav>
    </div>
    
  </div>
  
</header>

这证明 flexbox 的直接子级 水平对齐 左右，中间有 space。如果存在两个以上的元素，它们将在容器的宽度上以相等的间距放置。

对齐项目将决定 flexbox 内元素的垂直对齐方式。

未设置 flex-direction 时为真（默认值 - 行）。当flex-direction设置为column时，受justify和align影响的"axis"反转。

如何垂直居中导航栏内的所有元素？

How to vertically center all the elements inside a navigation bar?

html

css

navigationbar