2

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

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?

WSkinner
  • 2,147
  • 1
  • 19
  • 21

2 Answers2

3

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

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
0

It's hard without a fixed height for your <li>. If you do have a fixed height you could:

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

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

You'd set the line height to your liking.

I also saw this from Nerds to Geeks:

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

I Changed the p element to li; it should still work.

tahdhaze09
  • 2,220
  • 1
  • 21
  • 36
  • display: table-cell is not supported by IE7 and if your text have two lines, the line-height set to 4em will make overflow the label – Fabrizio Calderan Mar 15 '12 at 19:09
  • The 4em is a sample setting. You would set the line-height to your liking, meaning show in the browser and tweak it until it's right. There is no mention in your original question about Internet Explorer 7. I assume that if anyone is making a site for the web, they are making it for modern browsers, not 8 year old browser that even Microsoft is ready to dump support for. Is support for IE7 a must? If not, the solution is above. If so, convince your client to take 10 minutes to upgrade. – tahdhaze09 Mar 15 '12 at 19:25