title: Vertically centering text within circles created with border-radius
body: <p>Today I was having an awful lot of trouble getting some small text vertically centered within elements that were circle which were created using <code>border-radius</code>.</p>
  
  <p>Some of the elements looked fine, but one in particular (a lowercase <em>e</em> was too close to the bottom); I had <code>2px</code> of <code>padding</code> and it seemed to look fine; however once viewed on a mobile device it was slightly lower.</p>
  
  <p>Here is some code that is as close of a replica as I could come up with to show the issue; you will notice this text has a similar issue with the lowercase <em>e</em> being too close to the bottom.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="option"&gt;
      &lt;span class="icon"&gt;t&lt;/span&gt;
      &lt;span class="text"&gt;123456789&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="option"&gt;
      &lt;span class="icon"&gt;f&lt;/span&gt;
      &lt;span class="text"&gt;123456789&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="option"&gt;
      &lt;span class="icon"&gt;e&lt;/span&gt;
      &lt;span class="text"&gt;&lt;a href="mailto:moo@moo.com"&gt;moo@moo.com&lt;/a&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.option {
      margin-bottom: 10px;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 14px;
  }
  
  .option .icon {
      display: inline-block;
      text-align: center;
      width: 24px;
      height: 24px;
      line-height: 24px;
      color: #fff;
      border-radius: 50%;
      background-color: blue;
  }
  
  .option .text {
      padding-left: 10px;
  }
  </code></pre>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/7bygsgn1/7/" rel="nofollow">http://jsfiddle.net/7bygsgn1/7/</a></p>
  
  <p>Whilst I haven't tried them with the particular code on jsfiddle, when I was having the issue today I tried a whole range of centering techniques including:</p>
  
  <ul>
  <li>Using <code>line-height</code></li>
  <li>Using <code>absolute</code> positioning</li>
  <li>Using <code>vertical-align: middle;</code> in conjunction with <code>display: table-cell;</code></li>
  <li>Negative Margins</li>
  <li>Using the method explained <a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/" rel="nofollow">here</a>.</li>
  </ul>
  
  <p>Either it had no affect on the centering or caused the shape of the circle to change.</p>
  
  <p>Is there any way you can reliably vertically center in situations such as this?</p>