title: How can I vertically center text in two side by side divs?
body: <p>Thanks for reading this.</p>
  
  <p>I have markup similar to what is below. Using the line-height works when there is only one line of text, but the comments data will frequently be multi-line. What is the best way to get the label and the data vertically centered?</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
   &lt;style&gt;
    body {margin:0; padding:0; font-size:12px; font-family:Verdana; text-align:center;}
    body {text-align: -moz-center; }  /* For Firefox */
    .record {width:760px; text-align:left; }
    .label {float:left; width:125px; line-height:75px;}
    .data {float:left; margin-left:10px; line-height:75px;}
    .clear {clear:left;}
   &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="record"&gt;
     &lt;div class="label"&gt;Subject:&lt;/div&gt;
     &lt;div class="data"&gt;This is the subject&lt;/div&gt;
     &lt;span class="clear"&gt;&lt;/span&gt;
  
     &lt;div class="label"&gt;Status:&lt;/div&gt;
     &lt;div class="data"&gt;This is the status&lt;/div&gt;
     &lt;span class="clear"&gt;&lt;/span&gt;
  
     &lt;div class="label"&gt;Comments:&lt;/div&gt;
     &lt;div class="data"&gt;These are the comments&lt;/div&gt;
     &lt;span class="clear"&gt;&lt;/span&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>