Вертикальное выравнивание панели навигации не работает
Итак, у меня есть панель навигации, а затем <ul>
который имеет некоторые <li>
внутри. Я хочу, чтобы он был вертикально выровнен с панелью навигации .navbar
но похоже это не работает. У кого-нибудь есть идеи, что я делаю не так?
Вот скрипка и код: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li><a href="#">Shop</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Спасибо!
3 ответа
Если я понимаю, чего вы пытаетесь достичь. Затем вы должны сделать логотип абсолютно позиционированным, а затем выровнять ul
может быть сделано с line-height
, Полный CSS:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
И обновленная скрипка
Я верю, что твой логотип толкает твой уль вниз. как было упомянуто выше. Вы можете оставить свой класс держателя логотипа слева. Это позволит вам позиционировать свой li так, как вам нужно. Line-height - это способ сделать это, вы также можете использовать поле, отступ или абсолютную позицию для вашего li при необходимости. Удачи.
Я изменил display
вашей logo-holder
в inline-block
а затем установить vertical-align:middle
Теперь он появляется рядом с логотипом и по центру.
см. здесь для скрипки http://jsfiddle.net/gaurav5430/x7EAg/3/
это полный CSS:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}