Html – Vertical Align Unordered List Nav Links


I see that this question has been asked many times but I think my case is slightly different.

The navigation for the site I am working on is constructed with an unordered list like so:

<div class="nav_root nav_area_top">
    <ul class="nav_root_wrap">
        <li class="nav_parent first">
            <a href="">
        <li class="nav_parent first">
            <a href="">
                Health Services


.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 
    padding: 0px;
    line-height: 18px;

Which renders to:
enter image description here

As you can see some of the nav items are one line and some are two.

Is it possible for me to vertical-align: middle the one line items?

Best Solution

add this style (override if necessary)

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

last two properties are inline hacks necessary for IE<8 to properly render inline-blocks element