水平居中導航，同時在左側保留徽標，在右側保留語言選擇

Question

我正在嘗試將菜單水平居中對齊，同時將徽標向左對齊，將語言選擇向右對齊。 我根本不知道如何在調整大小時保持相同的比例。 我嘗試了很多建議，但沒有找到適合我的導航欄的建議。 這是我正在嘗試的：

CSS：

.nav-bar img {
    float: left;
}
.nav-bar {
    height: 70px;
    width: 100%;
}
#container {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
}
.nav-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}
#menu {
  float: left;
}

#languages {
  float: right;
}

HTML：

  <div id="container">

    <img id="logo" src="image.svg">

    <ul id="menu">
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact us</a></li>
    </ul>

    <ul id="lang-bar">
      <li><a href="#">En</a></li>
      <li><a href="#">Fr</a></li>
    </ul>
  </div>
</nav>

Answer 1

您可以對容器使用text-align:center ，使ul內聯塊，並將徽標和語言菜單絕對定位在左上方和右上方：

 html, body { margin: 0; } #container { width: 100%; text-align: center; position: relative; background: #ddd; } #container ul { list-style: none; display: inline-block; } #container ul li { display: inline-block; margin-right: 1em; } #logo { position: absolute; left: 0; } #lang-bar { position: absolute; right: 0; } 

 <div id="container"> <img id="logo" src="image.svg"> <ul id="menu"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact us</a></li> </ul> <ul id="lang-bar"> <li><a href="#">En</a></li> <li><a href="#">Fr</a></li> </ul> </div> 

Answer 2

您可以在父級上使用flex ，也可以使用justify-content: space-between中間的justify-content: space-between來分隔3個flex子級，但這不會真正使徽標居中。 相反，我將在flex子flex-basis: 0啟用flex-grow: 1和flex-basis: 0 （或flex: 1 0 0;簡稱），以便它們占據相等的空間量，然后適當地調整flex子級中的內容。 您可以使用align-items: center在主容器上居中，也可以align-items: center所有內容垂直居中。

 #container { justify-content: space-between; align-items: center; } #container > * { flex: 1 0 0; } #lang-bar { flex-direction: column; align-items: flex-end; } #logo { max-width: 100px; } .flex { display: flex; } #menu { justify-content: center; list-style: none; } #menu li { margin: 0 .5em; } 

 <div id="container" class="flex"> <div class="logoContainer"> <img id="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div> <ul id="menu" class="flex"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact us</a></li> </ul> <ul id="lang-bar" class="flex"> <li><a href="#">En</a></li> <li><a href="#">Fr</a></li> </ul> </div>