Вертикальное выравнивание панели навигации не работает

Итак, у меня есть панель навигации, а затем <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;
}
Другие вопросы по тегам