title: Vertical Align Unordered List Nav Links?
body: <p>I see that this question has been asked many times but I think my case is slightly different.</p>
  
  <p>The navigation for the site I am working on is constructed with an unordered list like so:</p>
  
  <pre><code>&lt;div class="nav_root nav_area_top"&gt;
      &lt;ul class="nav_root_wrap"&gt;
          &lt;li class="nav_parent first"&gt;
              &lt;a href="california.providence.org/torrance/pages/Locations.aspx"&gt;
                  Locations
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav_parent first"&gt;
              &lt;a href="california.providence.org/torrance/pages/Locations.aspx"&gt;
                  Health Services
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  ...
  
  .nav_area_top ul.nav_root_wrap &gt; 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 &gt; li &gt; a 
  {
      color:#fff;
      padding: 0px;
      line-height: 18px;
  }
  </code></pre>
  
  <p>Which renders to:
  <img src="https://i.stack.imgur.com/lwtKf.png" alt="enter image description here"></p>
  
  <p>As you can see some of the nav items are one line and some are two.  </p>
  
  <p><strong>Is it possible for me to vertical-align: middle the one line items?</strong></p>