Wyrównywanie w pionie Nieuporządkowana lista łączy nawigacyjnych? - html, css, listy html, wyrównanie

Widzę, że to pytanie zostało zadane wiele razy, ale myślę, że moja sprawa jest nieco inna.

Nawigacja dla witryny, nad którą pracuję, jest zbudowana z nieuporządkowanej listy, takiej jak ta:

<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;
}

Co czyni:

Jak widać niektóre elementy nawigacyjne to jedna linia, a dwie są dwie.

Czy mogę wyrównać w pionie: środkowe elementy zamówienia?

Odpowiedzi:

dodaj ten styl (w razie potrzeby zmień)

.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;
}

dwie ostatnie właściwości są niezbędne dla hacków inline IE<8 prawidłowo renderować inline-blocks element

Jest ciężko bez stałej wysokości <li>. Jeśli masz stałą wysokość, możesz:

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

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

Ustawiłeś wysokość linii według własnych upodobań.

Widziałem to także z Nerdowie dla maniaków:

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

Zmieniłem p element do li; powinien nadal działać.