html - 如何垂直将 Logo 置于标题的左侧并将导航置于标题的右侧？

Question

我一直在努力解决这个问题。我想学习的是了解使用语义 HTML 将元素垂直居中导航的不同方法。我想要我的 Logo 在左边，导航在右边。

我尝试在我的导航元素上使用 float ，但 Logo 会中断并且不会垂直居中。我为此使用了 clearfix，但我仍然找不到使 Logo 和导航垂直居中的方法。

你能帮帮我吗？并解释一下你的答案好吗？那么，如果可能的话，你能告诉我使用我的 html 的确切格式使 Logo (左)和导航(右)垂直居中的其他方法吗？

这是我的代码: https://codepen.io/yortz/pen/pQdKWd

HTML

  <!-- HEADER -->
  <header>
    <!-- LOGO -->
    <a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
    <nav>
      <ul class="clearfix">
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Get in Touch</a></li>  
      </ul>
    </nav>
  </header>

CSS

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
  background-color: #ccc;
}
nav {
  background-color: aqua;
}

/* CENTERING NAVIGATION */
header {
  width: 100%;
}
#site-logo,
  nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}

/* CLEAR FLOATS */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

请帮忙。谢谢!

Answer 1

我会使用 flexbox 在导航中定位

header {
   display: flex;
   justify-content: space-between; // pushes the logo to the left and the nav to the right
   align-items: center; // center aligns children of nav vertically
}

如果你想在不使用 flexbox 的情况下实现类似的效果，你可以绝对定位 Logo :

header {
  position: relative; // with this all children can be positioned absolutely, relative to the header
  text-align: right; // this aligns the nav to the right of the header
}

header > a {
  position: absolute; // positions the logo absolute, relative to header
  top: 50%; // aligns the logo in the middle of the relative parent
  left: 0; // aligns the logo to the left edge of the relative parent
  transform: translateY(-50%); // changes the coordinates of the logo, to center it vertically (y-axis)
}

nav {
  text-align: left; // just used to reset the text-alignment in the nav elements
}

我会考虑使用类而不是选择 a 标签，例如 <a class="logo" href="...">...</a>然后 header .logo {...}在 CSS 中，而不是 header > a {} .如果您向标题添加更多元素，那将更有前途。

快速提示:如果 Logo 高于导航如果会溢出父容器，那么您需要修改父容器的高度来解决这个问题。如果您可以保证导航始终高于 Logo ，这对您来说不是问题，您可以保持页眉的高度不变。