How to draw a circle with text in the middle?

dot picture dot · May 17, 2013 · Viewed 405.9k times · Source

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

Jawad picture Jawad · May 17, 2013

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.

Example

JSFiddle

.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>