title: css position label text in the true center (vertical and horizontal) without moving the label
body: <p>I am trying to use CSS to position text of a label in the exact center of a  control. The CSS below still leaves the text at the top of the label. Any ideas please?</p>
  
  <p><a href="http://jsfiddle.net/HFJ6V/1/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>CSS </p>
  
  <pre><code>.plate_well {
      float: left;
      margin: 0;
      padding: 0;
      height: 30px;
      width: 30px;
      text-align: center;
      vertical-align: 15px;   /* this doesnt do anything ?? */
      font-size: 7pt;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -khtml-border-radius: 15px;
      border-radius: 15px;
      border: 1px solid #AAAAAA;
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;label class="plate_well" id="foo"&gt;bar&lt;/label&gt;
  </code></pre>
  
  <p>(I also have the issue of IE being unable to render curves but that's a separate question)</p>