Vertically centering text within circles created with border-radius

Question

Today I was having an awful lot of trouble getting some small text vertically centered within elements that were circle which were created using border-radius.

Some of the elements looked fine, but one in particular (a lowercase e was too close to the bottom); I had 2px of padding and it seemed to look fine; however once viewed on a mobile device it was slightly lower.

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 e being too close to the bottom.

HTML:

<div class="option">
    <span class="icon">t</span>
    <span class="text">123456789</span>
</div>
<div class="option">
    <span class="icon">f</span>
    <span class="text">123456789</span>
</div>
<div class="option">
    <span class="icon">e</span>
    <span class="text"><a href="mailto:[email protected]">[email protected]</a></span>
</div>

CSS:

.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;
}

JSFiddle: http://jsfiddle.net/7bygsgn1/7/

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:

• Using line-height
• Using absolute positioning
• Using vertical-align: middle; in conjunction with display: table-cell;
• Negative Margins
• Using the method explained here.

Either it had no affect on the centering or caused the shape of the circle to change.

Is there any way you can reliably vertically center in situations such as this?

Answer 1

You may use an inline-block pseudo-element with an height of 24px / 100% , and vertical-align it to middle.

.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;
  color: #fff;
  border-radius: 50%;
  background-color: blue;
}

/* here the pseudo-element method */
.option .icon:before {
  content: '';
  display: inline-block;
  padding-top: 100%;/* cause here we have a square and width for percentage vertical (padding/margin) is the reference , height:100%; or height:24px; will do as well */
  vertical-align: middle;
}
/* end update */
.option .text {
  padding-left: 10px;
}

<div class="option">
  <span class="icon">t</span>
  <span class="text">123456789</span>
</div>
<div class="option">
  <span class="icon">f</span>
  <span class="text">123456789</span>
</div>
<div class="option">
  <span class="icon">e</span>
  <span class="text"><a href="mailto:[email protected]">[email protected]</a></span>
</div>

or display:flex; , the most simple:

.option {
  margin-bottom: 10px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
}
.option .icon {
  /* next-three lines to center content both axis */
  display: inline-flex;
  justify-content:center;
  align-items:center;
  /*text-align: center;*/
  width: 24px;
  height: 24px;
  color: #fff;
  border-radius: 50%;
  background-color: blue;
}
.option .text {
  padding-left: 10px;
}

<div class="option">
  <span class="icon">t</span>
  <span class="text">123456789</span>
</div>
<div class="option">
  <span class="icon">f</span>
  <span class="text">123456789</span>
</div>
<div class="option">
  <span class="icon">e</span>
  <span class="text"><a href="mailto:[email protected]">[email protected]</a></span>
</div>