How can I use CSS to center a plus sign horizontally and vertically within a circle? Here's my code:
#container {
font-size: 20px;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid black;
line-height: 16px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<span id="container">+</span>
Here's a jsfiddle:
http://jsfiddle.net/flyingL123/on44a0xq/
When I view this is Chrome 46.0.2490.86 (64-bit)
on a Mac, the plus sign does not look vertically aligned. It's much closer to the bottom of the circle than the top. Here's a screenshot of what I see in the fiddle:
I thought this was going to be straight forward, but it's driving me nuts. Any idea how to align the plus sign vertically?
Please note Bootstrap css is included in the fiddle because I'm using it in my project. If I remove Bootstrap from the fiddle, it seems like the plus sign moves closer to vertically centered.