Выравнивание меню 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%; 
}