水平居中导航，同时在左侧保留徽标，在右侧保留语言选择

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>