对齐Navbar菜单到页面中间

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。不知道它是你在找什么。

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%; 
}