Vertically centering text within circles created with border-radius - css

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">moo#moo.com</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">moo#moo.com</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">moo#moo.com</span>
</div>

Answer 2

Vertically/Horizontally center anything inside a parent element without knowing the heights/widths of either:
/* This parent can be any width and height */
.parent {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
}
Essentially this creates a ghost element inside the parent that allows the child to be positioned relative to it. The height: 100% allows the vertical-align: middle to do its job properly.
Hope this helps!
Edit: Credit to https://css-tricks.com/centering-in-the-unknown/