如何在 header 的左侧垂直居中徽标并在右侧居中导航？

Question

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

我尝试在我的导航元素上使用浮动，但徽标会损坏并且不会垂直居中。我为此使用了 clearfix，但我仍然找不到使徽标和导航垂直居中的方法。

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

这是我的代码： 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

使用 float left 和 right 并为徽标提供 padding 以垂直居中对齐

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
.logo{
  float:left;
}
.logo img{
  padding:24px 10px;
}
nav {
 background-color: aqua;
  float:right;
}

.clearfix{
  clear:both;
}

/* 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;
}

      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <a href="#" class="logo"><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>
        <div class="clearfix"></div>
      </header>

Answer 2

如果要使元素垂直居中，可以使用 align-content 和 display: flex。

Answer 3

我会使用 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 的情况下实现类似的效果，你可以绝对定位徽标：

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
}

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

快速提示：如果徽标高于导航，则会溢出 parent 容器，因此您需要修改 parent 的高度来解决此问题。如果您可以保证导航始终高于徽标，这对您来说不是问题，您可以保持 header 的高度不变。

Answer 4

希望这会有所帮助。我对您的 jsfiddle link 进行了一些更改并将其粘贴到此处。只是 css 变化。

    * {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
 width:100%;
  display:block;
}
nav {
}




/* CENTERING NAVIGATION */
header {
    width: 100%;
}
#site-logo{
  display:inline-block;
  vertical-align:middle;
    width:calc(20% - 2px);
}
nav {
  display: inline-block;
  vertical-align: middle;
  position:relative;
  width:calc(80% - 2px);

}
nav ul {
  list-style-type: none;
  padding-left: 0;
  display:inline-block;
  position:relative;
  left:76%;
  background-color: aqua;
}
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 5

您需要像这样修改您的代码：

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav {
    background-color: aqua;
}
/* CENTERING NAVIGATION */
header {
    width: 100%;
      display: table;
    vertical-align: middle;
}
.logo-wrapper{
  display: table-cell;
    vertical-align: middle;
}
#site-logo{
  display: inline-block;
  vertical-align: middle;
}
nav{
  display: table-cell;
    float: right;
}
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;
}

然后像这样编辑 HTML 锚标记：

<a href="#" class="logo-wrapper"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>

Answer 6

已经有很多答案了。这是我的。我将徽标作为 li 元素放在 <ul> 中。我将 <ul> 设为 flex 容器，最重要的是：第一个列表项右侧的 margin:auto。

nav ul li:first-child {
 margin:0 auto 0 0
}

* {
  box-sizing: border-box;
}




/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav ul {
 background-color: aqua;
  display:flex; 
}
nav ul li a{height:47px;}


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



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

      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        
        <nav>
          <ul class="clearfix">
            <li><a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a></li>
            <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>

如何在 header 的左侧垂直居中徽标并在右侧居中导航？

How to VERTICALLY centered the logo on LEFT and navigation on RIGHT of the header?

html

css

navigation

center

vertical-alignment