如何垂直居中左侧的徽标和标题右侧的导航？答案

【问题标题】：How to VERTICALLY centered the logo on LEFT and navigation on RIGHT of the header?如何垂直居中左侧的徽标和标题右侧的导航？
【发布时间】：2019-04-22 14:58:05
【问题描述】：

我一直在努力解决这个问题。我想学习的是了解使用语义 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;
}

请帮忙。谢谢！

【问题讨论】：

我忘了说，你能不使用flexbox解决这个问题吗？
您可能想要编辑您的问题并添加该信息

标签： html css navigation center vertical-alignment

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

您好！感谢您的评论。但是，你能不使用 flexbox 解决这个问题吗？谢谢！！！
你可以使用vertical-align: middle;

【解决方案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 的情况下实现类似的效果，你可以绝对定位 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-tag，例如 <a class="logo" href="...">...</a>，然后在 CSS 中使用 header .logo {...}，而不是 header > a {}。如果您在标题中添加更多元素，那将是更多的未来证明。

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

【讨论】：

您好！感谢您的评论。但是，你能不使用 flexbox 解决这个问题吗？谢谢！！！
我编辑了我的答案以反映另一种方法
哇。我会试试的！非常感谢您花时间回答我的问题：D

【解决方案4】：

希望这会有所帮助。我对您的 jfiddle 链接进行了一些更改并将其粘贴到此处。只是 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;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：