title: How do I align text to the middle of an element with CSS in Twitter Bootstrap?
body: <p>I am using <a href="http://twitter.github.com/bootstrap/javascript.html#alerts" rel="noreferrer">Bootstrap</a> alerts and this is my success alert message:</p>
  
  <pre><code>&lt;div class="alert alert-success" id="UploadSuccess"&gt;
      &lt;a class="close" data-dismiss="alert"&gt;×&lt;/a&gt;
      &lt;strong&gt;Congrats!&lt;/strong&gt; You have successfully did it!.
  &lt;/div&gt;
  </code></pre>
  
  <p>And the result is:</p>
  
  <p><img src="https://i.stack.imgur.com/NKZG5.png" alt="Resulting image of above HTML"></p>
  
  <p>As you'll can see that the text alignment is at the top of the <code>&lt;div&gt;</code>. So, how would II align it to the middle?</p>
  
  <p>I have tried using <code>padding-top</code> and <code>vertical-align:middle</code> but neither works (I end up with the same result).</p>
  
  <p>What do I need to do to change the vertical alignment of the text?</p>