[css] 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.

One way to do it is to use flexbox in order to align the text on the middle. The way I found to do it, is the following:

HTML:

<div class="circle-without-text">
  <div class="text-inside-circle">
    The text
  </div>
</div>

CSS:

.circle-without-text {
    border-radius: 50%;
    width: 70vh;
    height: 70vh;
    background-color: red;
    position: relative;
 }

.text-inside-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 }

Here the plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

Using this code it will be responsive also.

<div class="circle">ICON</div>

.circle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding: 50% 0;
  border-radius: 50%;
  /* Just making it pretty */
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  background: #38a9e4;
  color: white;
  font-family: Helvetica, Arial Black, sans;
  font-size: 48px;
  text-align: center;
}

Adding a circle around a number can be easily done with CSS. This can be done using the border-radius property.

Here, we also used the display property set to "inline-block" to represent the element as an inline-level block container.

  span.circle {
  background: #010101;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #f1f1f1;
  display: inline-block;
  font-weight: bold;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
}

 <span class="circle">1</span>

Of course, you have to use to tags to do that. One to create the circle and other for the text.

Here some code may help you

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    color:black;

}
.innerTEXT{
    position:absolute;
    top:80px;
    left:60px;
}

<div id="circle">
    <span class="innerTEXT"> Here a text</span>
</div>

Live example here http://jsbin.com/apumik/1/edit

Update

Here less smaller with a few changes

http://jsbin.com/apumik/3/edit

For me, only this solution worked for multiline text:

.circle-multiline {
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}

If your content is going to wrap and be of unknown height, this is your best bet:

http://cssdeck.com/labs/aplvrmue

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  background: yellow;
}

.badge {_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
  display: table-cell;_x000D_
  text-align: center;_x000D_
  vertical-align: middle;_x000D_
  border-radius: 50%;_x000D_
  background: yellow;_x000D_
}

<div class="badge">1</div>

For a web design I was recently given I had to solve the centered and unknown amount of text in a fixed circle issue and I thought I'd share the solution here for other people looking into circle/text combos.

The main issue I had was text would often break the bounds of the circle. To solve this I ended up using 4 divs. One rectangular container that specified the max (fixed) boundaries of the circle. Inside that would be the div that draws the circle with its width and height set to 100% so changing the size of the parent changes the size of the actual circle. Inside that would be another rectangular div which, using %'s, would create a text boundary area preventing any text leaving the circle (for the most part) Then finally the actual div for the text and vertical centering.

It makes more sense as code:

/* Main Container -  this controls the size of the circle */_x000D_
.circle_container_x000D_
{_x000D_
 width : 128px;_x000D_
 height : 128px;_x000D_
 margin : 0;_x000D_
 padding : 0;_x000D_
/* border : 1px solid red; */_x000D_
}_x000D_
_x000D_
/* Circle Main draws the actual circle */_x000D_
.circle_main_x000D_
{_x000D_
 width : 100%;_x000D_
 height : 100%;_x000D_
 border-radius : 50%;_x000D_
 border : 2px solid black; /* can alter thickness and colour of circle on this line */_x000D_
 margin : 0;_x000D_
 padding : 0;_x000D_
}_x000D_
_x000D_
/* Circle Text Container - constrains text area to within the circle */_x000D_
.circle_text_container_x000D_
{_x000D_
 /* area constraints */_x000D_
 width : 70%;_x000D_
 height : 70%;_x000D_
 max-width : 70%;_x000D_
 max-height : 70%;_x000D_
 margin : 0;_x000D_
 padding : 0;_x000D_
_x000D_
 /* some position nudging to center the text area */_x000D_
 position : relative;_x000D_
 left : 15%;_x000D_
 top : 15%;_x000D_
 _x000D_
 /* preserve 3d prevents blurring sometimes caused by the text centering in the next class */_x000D_
 transform-style : preserve-3d;_x000D_
 _x000D_
 /*border : 1px solid green;*/_x000D_
}_x000D_
_x000D_
/* Circle Text - the appearance of the text within the circle plus vertical centering */_x000D_
.circle_text_x000D_
{_x000D_
 /* change font/size/etc here */_x000D_
 font: 11px "Tahoma", Arial, Serif; _x000D_
 text-align : center;_x000D_
 _x000D_
 /* vertical centering technique */_x000D_
 position : relative;_x000D_
 top : 50%;_x000D_
 transform : translateY(-50%);_x000D_
}

<div class="circle_container">_x000D_
 <div class="circle_main">_x000D_
  <div class="circle_text_container">_x000D_
   <div class = "circle_text">_x000D_
    Here is an example of some text in my circle._x000D_
   </div>_x000D_
  </div>_x000D_
 </div>_x000D_
</div>   

You can uncomment the border colours on the container divs to see how it constrains.

Things to be aware of: You can still break the bounds of the circle if you put too much text in or use words/unbroken text that are too long. It's still not a good fit for completely unknown text (such as user input) but works best when you know vaguely what the largest amount of text you'll need to store is and set your circle size and font sizes accordingly. You can set the text container div to hide any overflow of course, but that may just look "broken" and is no replacement for actually accounting for max size properly in your design.

Hope this is useful to someone! HTML/CSS is not my main discipline so I'm sure it can be improved on!

If you are using Foundation 5 and Compass framework, you can try this.

.sass input

$circle-width: rem-calc(25) !default;
$circle-height: $circle-width !default;
$circle-bg: #fff !default;
$circle-radius: 50% !default;
$circle-line-height: $circle-width !default;
$circle-text-align: center !default;

@mixin circle($cw:$circle-width, $ch:$circle-height, $cb:$circle-bg, $clh:$circle-line-height, $cta:$circle-text-align, $cr:$circle-radius) {
    width: $cw;
    height: $ch;
    background: $cb;
    line-height: $clh;
    text-align: $cta;
    @include inline-block;
    @include border-radius($cr);
}

.circle-default {
    @include circle;
}

.css output

.circle-default {
  width: 1.78571rem;
  height: 1.78571rem;
  background: white;
  line-height: 1.78571rem;
  text-align: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

I was combining some answers from other people and with float and relative it gave me the result I needed.

In HTML I use a div. I use it inside a li for a navigation bar.

.large-list-style {
    float: left;
    position: relative;
    top: -8px;

    border-radius: 50%;

    margin-right: 8px;

    background-color: rgb(34, 198, 200);

    font-size: 18px;
    color: white;
}
    .large-list-style:before,
    .large-list-style:after {
        content: '\200B';
        display:inline-block;
        line-height:0;

        padding-top: 50%;
        padding-bottom: 50%;
    }
    .large-list-style:before {
        padding-left: 16px;
    }
    .large-list-style:after {
        padding-right: 16px;
    }

If it's only one line of text you could use the line-height property, with the same value as the element height:

height:100px;
line-height:100px;

If the text has multiple lines, or if the content is variable, you could use the padding-top:

padding-top:30px;
height:70px;

Example: http://jsfiddle.net/2GUFL/

I think you want to write text in an oval or circle? why not this one?

<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>

Draw a circle with text in middle with HTML Tag and without CSS

HTML having SVG tag for this. You can follow this standard approach if you don't want to go for CSS.

 <svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
     Sorry, your browser does not support inline SVG.
   <text fill="#000000" font-size="18" font-family="Verdana"
     x="15" y="60">ASHISH</text>
 </svg>

You can use css3 flexbox.

HTML:

<div class="circle-with-text">
    Here is some text in circle
</div>

CSS:

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

This will allow you to have vertically and horizontally middle aligned single line and multi-line text.

body {_x000D_
  margin: 0;_x000D_
}_x000D_
.circles {_x000D_
  display: flex;_x000D_
}_x000D_
.circle-with-text {_x000D_
  background: linear-gradient(orange, red);_x000D_
  justify-content: center;_x000D_
  align-items: center;_x000D_
  border-radius: 100%;_x000D_
  text-align: center;_x000D_
  margin: 5px 20px;_x000D_
  font-size: 15px;_x000D_
  padding: 15px;_x000D_
  display: flex;_x000D_
  height: 180px;_x000D_
  width: 180px;_x000D_
  color: #fff;_x000D_
}_x000D_
.multi-line-text {_x000D_
  font-size: 20px;_x000D_
}

<div class="circles">_x000D_
  <div class="circle-with-text">_x000D_
    Here is some text in circle_x000D_
  </div>_x000D_
  <div class="circle-with-text multi-line-text">_x000D_
    Here is some multi-line text in circle_x000D_
  </div>_x000D_
</div>

Got this from YouTube page which has a really simple set up. Absolutely maintainable and reusable.

.circle {_x000D_
    position: absolute;_x000D_
    top: 4px;_x000D_
    color: white;_x000D_
    background-color: red;_x000D_
    width: 18px;_x000D_
    height: 18px;_x000D_
    border-radius: 50%;_x000D_
    line-height: 18px;_x000D_
    font-size: 10px;_x000D_
    text-align: center;_x000D_
    cursor: pointer;_x000D_
    z-index: 999;_x000D_
}

<div class="circle">2</div>

Some of solutions here didn't work well for me on small circles. So I made this solution using ol absolute position.

Using SASS will look like this:

.circle-text {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 50%;
    > .inner-text {
        display: block;
        @extend .center-align;
    }
}

.center-align {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@mixin circle-text($size) {
    width: $size;
    height: $size;
    @extend .circle-text;
}

And can be used like

#red-circle {
    background-color: red;
    border: 1px solid black;
    @include circle-text(50px);
}

#green-circle {
    background-color: green;
    border: 1px solid black;
    @include circle-text(150px);
}

See demo on https://codepen.io/matheusrufca/project/editor/DnYPMK

See the snippet to view output CSS

.circle-text {_x000D_
  position: relative;_x000D_
  display: block;_x000D_
  border-radius: 50%;_x000D_
  text-align: center;_x000D_
  min-width: 50px;_x000D_
  min-height: 50px;_x000D_
}_x000D_
_x000D_
.center-align {_x000D_
  position: absolute;_x000D_
  top: 50%;_x000D_
  left: 50%;_x000D_
  margin: auto;_x000D_
  -webkit-transform: translateX(-50%) translateY(-50%);_x000D_
  -ms-transform: translateX(-50%) translateY(-50%);_x000D_
  transform: translateX(-50%) translateY(-50%);_x000D_
}

<div id="red-circle" class="circle-text">_x000D_
  <span class="inner-text center-align">Hey</span>_x000D_
</div>_x000D_
_x000D_
<div id="green-circle" class="circle-text">_x000D_
  <span class="inner-text center-align">Big size circle</span>_x000D_
  <div>_x000D_
    <style>_x000D_
      #red-circle {_x000D_
        background-color: red;_x000D_
        border: 1px solid black;_x000D_
        width: 60px;_x000D_
        height: 60px;_x000D_
      }_x000D_
      _x000D_
      #green-circle {_x000D_
        background-color: green;_x000D_
        border: 1px solid black;_x000D_
        width: 150px;_x000D_
        height: 150px;_x000D_
      }_x000D_
    </style>