I've experimented with various methods like using a px width or em widths. I've attempted nesting a span and trying different styles such as text-align:center or margin:0 auto.
I can manage to center either the R or the S, but struggling to get both of them centered using the same style. It's crucial for them to be centered in the same manner since the character is not fixed in this example.
Adjusting the font size sometimes shifts which item is centered. Zooming my browser to 300% makes them both appear centered, but that is not a practical solution. :)
<style>
div { margin-bottom:10px; }
span {
display:inline-block;
width:16px;
border:1px solid #000;
text-align:center;
margin-left:20px;
}
.example2 span {
border-radius:50%;
}
</style>
<div class="example1">
<span>R</span> <span>S</span>
</div>
<div class="example2">
<span>R</span> <span>S</span>
</div>
http://codepen.io/anon/pen/NrqJLX
https://i.stack.imgur.com/ZlnA7.png
The 'S' seems to be slightly off to the right by 1 pixel.
Although I've come across many similar stackoverflow questions, none quite match my specific issue. Apologies if this has been previously addressed.