Search code examples
csscss-shapes

How to draw a circle with text in the 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.

Solution

  • Setting a line-height the same value as the height of the div will show one line of text vertically centered. 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>