title: how to align the text vertically in center in a fixed height?
body: <p>I have an image of <code>height=79px</code> and <code>width=138px</code> and I want to align the text vertically center through <code>&lt;li&gt;</code>. For this, I write my css as :</p>
  
  <pre><code>#left-container .col1 li
  {
      background:url(../images/button.png) no-repeat top center;
      height:79px;
      line-height:79px;
      font-weight:bold;
      font-size:1.5625em; /* 25px */
      text-align:center;
      text-transform:uppercase;
      margin-bottom:1px;
      position:relative;  
  }
  </code></pre>
  
  <p>This is okay with single word, e.g. <code>Qty.</code>, but not with 2 words, e.g. <code>Item Options</code>, <code>Hold Selected</code>,  etc.</p>
  
  <p>So, can you please suggest whether I should create separate classes for each button to adjust line heights separately, or is there any other unified way to adjust all the line heights in just one class?</p>