Вертикальное выравнивание Неупорядоченный список Nav Links? - PullRequest
Новая
       23

Вертикальное выравнивание Неупорядоченный список Nav Links?

2 голосов
/ 15 марта 2012

Я вижу, что этот вопрос задавался много раз, но я думаю, что мой случай немного отличается.

Навигация для сайта, над которым я работаю, построена с неупорядоченным списком, например: 

<div class="nav_root nav_area_top">
    <ul class="nav_root_wrap">
        <li class="nav_parent first">
            <a href="california.providence.org/torrance/pages/Locations.aspx">
                Locations
            </a>
        </li>
        <li class="nav_parent first">
            <a href="california.providence.org/torrance/pages/Locations.aspx">
                Health Services
            </a>
        </li>
    </ul>
</div>

...

.nav_area_top ul.nav_root_wrap > li
{
  background-image: url(../images/vert_bg_blue.jpg);
  background-color: #0C83BB;
  padding: 4px 15px 4px 15px;
  float: left;
  font-size: 13px;
  margin-left: 3px;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  min-height: 36px;
  text-align: center;
  border: 0px;
}
.nav_area_top ul.nav_root_wrap > li > a 
{
    color:#fff;
    padding: 0px;
    line-height: 18px;
}

Что делает: enter image description here

Как вы можете видеть, некоторые элементы навигации - одна строка, а некоторые - две.

Можно ли выровнять по вертикали: посередине позиции на одну строчку?

Ответы [ 2 ]

3 голосов
/ 15 марта 2012

добавить этот стиль (при необходимости переопределить) 

.nav_area_top ul.nav_root_wrap > li {
   line-height: 36px;
}

.nav_area_top ul.nav_root_wrap > li > a {
   line-height: normal; /* or just choose another value: e.g. 1.5; */
   vertical-align: middle;
   display: inline-block;
   *zoom: 1;
   *display: inline;
}

последние два свойства - это встроенные хаки, необходимые для IE<8 для правильной визуализации inline-blocks элемента

0 голосов
/ 15 марта 2012

Трудно без фиксированной высоты для <li>.Если бы у вас была фиксированная высота, вы могли бы: 

<style>
      #centerMe{
            line-height:4em
           }
</style>

<p id="centerMe">
    This line is vertically centered!
</p>

Вы бы установили высоту линии по своему вкусу.

Я также видел это от Ботаников до Гиков : 

#container li{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:28px;
}

Я изменил элемент p на li;это все еще должно работать.

...