I found this example on stackoverflow:
Which is great. But I'd like to know how to modify that example so that I can include text in the middle of the circle?
I also found this: Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
but for some reason, its not working for me. When I create the following test code:
<div class="badge">1</div>
instead of a circle, I get a oval shape. I'm trying to play around with the code to see how I can get it to work.
Setting a line-height
the same value as the height of the div will center the text vertically. In this example the height and line-height are 500px.
.circle {
width: 500px;
height: 500px;
line-height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
text-align: center;
background: #000
}
<div class="circle">Hello I am A Circle</div>