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