One element on my page is a quantity balloon for a basket, but I'm struggling to get it looking right. The font and vertical position don't seem to be cooperating for such a simple element:
https://i.sstatic.net/IfSi6.png
Despite trying solutions from stackoverflow (like setting line-height to -1 relative to the font size), I can't seem to fix it. Here is the code I'm working with:
HTML:
<span class="basket-qty">6</span>
CSS:
.basket-qty {
display: block;
text-align: center;
background-color: #C1637D;
color: #fff;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
font-weight: 500;
border-radius: 15px;
width:15px;
height:15px;
}
View my JSFiddle here: https://jsfiddle.net/e563tgdn/