Positioning of Custom Unordered List Text

I made a custom and horizontal unordered list. Here's a code example (nothing special):

<div id="steps-left">
    <ul>
      <li class="active one">Start</li>
    </ul>
</div>

Here's the CSS that styles it:

#steps-left {
    margin: 0 auto;
    display:inline-block;
    padding-bottom: 40px;
    font-weight: 200;
    font-size: 14px;color:#333333;
}

#steps-left ul {
    margin: auto;
    padding: 0;
    float: left;
}

#steps-left li {
    display: inline;
}

#steps-left ul li.active {
    background: transparent url('../images/steps-left-active.png') no-repeat top left;
    padding: 0px 0px 30px 46px; /* M开发者_开发问答akes the text move to the right of the bullet */
    line-height: 0px;
    margin-right: 30px; /* Defines the horizontal spacing between the bullets */

}

#steps-left ul li.active.one {
    background-position: 0 0;
    height: 42px;
    width: 43px;
}

Problem:

I'm trying to figure out how to shift the text down, because as shown by the image below, the text is too high. So far, I haven't found anything that shifts the text down. I know the line-height property works, but that only works if the list is vertical, which in this case I want it horizontal.

Here is the image:

http://i.stack.imgur.com/ia24l.jpg

One option you have is making a custom tag pair for each of your menu items. Did you try that?

Do it as follows:

<div id="steps-left">
  <ul>
    // And here you would be able to apply line height.
    <li class="active one lineheight">Start</li>
  </ul>
  <ul>
    <li class="blah blah lineheight"> Second item </li>
  </ul>  
</div>

CSS
.lineheight {
 //your desired lineheight.
   example: line-height:100px;
 }

Here you have a more specific and descriptive text on how to do it: Vertical-Align for li tag