dot dot - 4 months ago 14
CSS Question

css: how to draw circle with text in middle?

I found this example on stackoverflow:

Draw Circle using css alone

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.

Answer

HTML

<div class="circle">Hello I am A Circle </div>

CSS

.circle
{
width:500px;
height:500px;
border-radius:50%;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000
}

http://jsfiddle.net/rkEMR/