将导航栏菜单与页面中间对齐

Question

我在导航栏的中心有一个品牌形象，在它的两侧都有一个菜单。我想将两个菜单都与图像对齐（图像右侧的菜单左对齐，反之亦然）。我在右侧菜单上进行了管理，但无法在左侧对齐菜单。

我现在拥有的，在 大屏幕 上看起来不错，但在 小屏幕 上不能正确压缩（在左侧，右侧是正确的）。

CSS

.navbar{
  background-color: white;
  border: 0px;
  height: 200px;
}

.navbar-middle {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: auto;
}

.navbar-left {
  padding-right: 10%;
  padding-top: 90px;
  width: 50%;

}

.navbar-right {
  padding-left: 3%;
  padding-top: 90px;
  width: 50%;
}

.navbar-left li {
  padding-left: 20%;
}

.navbar-right li {
  padding-left: 15%;
}

HTML

<ul class="nav navbar-nav navbar-left">
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Vision</a></li>
  <li><a href="#">The Team</a></li>
</ul>

<ul class="nav navbar-middle">
  <li><img src="200.jpg"></li>
</ul>

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
</ul>

感谢您的帮助！

Answer 1

我认为你在追求这样的事情

ul{
  list-style: none;
  padding: 0;
}
.navbar{
  background-color: white;
  border: 0px;
  height: 200px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
}

.navbar-left {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
}

.navbar-middle {
  margin: 0 20px;
}

.navbar-right {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

.navbar-left li {
  margin-left: 20px;
  white-space:nowrap;
}

.navbar-right li {
  margin-right: 20px;
  white-space:nowrap;
}

<div class="navbar">
<ul class="nav navbar-nav navbar-left">
  <li><a class="pull-right" href="#">Home</a></li>
  <li><a href="#">Our Vision</a></li>
  <li><a href="#">The Team</a></li>
</ul>

<img class="nav navbar-middle" src="https://placehold.it/200x100/894567/ffffff?text=Logo">

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

Answer 2

从检查元素中我可以看出，您的三个 ul 似乎重叠。

所以我将navbar-left 和navbar-right 类的宽度分别更改为45%，并为图像添加了宽度规范，即img src="200.jpg" size=10%。

据我所知，你的左 ul 看起来是右对齐的，不是因为 class="pull-right"，而是因为你的 .navbar-left li { padding-left: 20%; }。您可以对您的navbar-right 执行相同操作，即.navbar-right li { padding-right: 20%; }。

这是结果：http://codepen.io/anon/pen/OMreKN。不知道是不是你要找的。​​p>

Answer 3

这是另一个选项：JSFiddle

<div class="wrapper">
    <ul class="nav navbar-nav navbar-left">
      <li><a class="pull-right" href="#">Home</a></li>
      <li><a href="#">Our Vision</a></li>
      <li><a href="#">The Team</a></li>
    </ul>

    <ul class="nav navbar-middle">
      <li><img src="200.jpg"></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

---

body {
    margin: 0;
}
.wrapper {
    background-color: gray;
    font-size: 0;
    width: 100%;
    height: 100px;
    text-align: center;
}
img {
    width: 100%;
}
.nav {
    display: inline-block;
    font-size: initial;
    list-style: none;
    padding: 0;
    vertical-align: middle;
}
li {
    display: inline-block;
    width: 75px;
}
.navbar-left, .navbar-right {
    width: 45%;
}
.navbar-middle {
    width: 10%;
}