How to draw a circle with text in the middle

Question

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     lt div class  badge  gt 1 lt  div gt    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

User · Answer

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      lt div id  circle  gt       lt span class  innerTEXT  gt  Here a text lt  span gt   lt  div gt    Live example here http   jsbin com apumik 1 edit  Update  Here less smaller with a few changes  http   jsbin com apumik 3 edit

User · Answer

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    x000D   x000D     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    x000D   lt div class  circle container  gt  x000D    lt div class  circle main  gt  x000D     lt div class  circle text container  gt  x000D      lt div class    circle text  gt  x000D      Here is an example of some text in my circle  x000D      lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  div gt     x000D   x000D   x000D    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

User · Answer

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  quot inline-block quot  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       lt span class  quot circle quot  gt 1 lt  span gt

User · Answer

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    lt div class  circle-without-text  gt     lt div class  text-inside-circle  gt      The text    lt  div gt   lt  div gt    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

User · Answer

You can use css3 flexbox   HTML    lt div class  circle-with-text  gt      Here is some text in circle  lt  div gt    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    x000D   x000D  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    x000D   lt div class  circles  gt  x000D     lt div class  circle-with-text  gt  x000D      Here is some text in circle x000D     lt  div gt  x000D     lt div class  circle-with-text multi-line-text  gt  x000D      Here is some multi-line text in circle x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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       x000D   x000D   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    x000D   lt div class  badge  gt 1 lt  div gt  x000D   x000D   x000D

User · Answer

I think you want to write text in an oval or circle  why not this one    x000D   x000D   lt span style  border-radius 50   border solid black 1px padding 5px  gt Hello lt  span gt  x000D   x000D   x000D

User · Answer

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         lt svg width  100  height  100  gt      lt circle cx  50  cy  50  r  40  stroke  green  stroke-width  4  fill  white    gt       Sorry  your browser does not support inline SVG      lt text fill   000000  font-size  18  font-family  Verdana       x  15  y  60  gt ASHISH lt  text gt    lt  svg gt

User · Answer

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

User · Answer

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

User · Answer

Got this from YouTube page which has a really simple set up  Absolutely maintainable and reusable     x000D   x000D   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    x000D   lt div class  circle  gt 2 lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   circle   x000D    width  500px  x000D    height  500px  x000D    border-radius  50   x000D    font-size  50px  x000D    color   fff  x000D    line-height  500px  x000D    text-align  center  x000D    background   000 x000D    x000D   lt div class  circle  gt Hello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A Circle lt  div gt  x000D   x000D   x000D

User · Answer

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        gt   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   x000D   x000D   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    x000D   lt div id  red-circle  class  circle-text  gt  x000D     lt span class  inner-text center-align  gt Hey lt  span gt  x000D   lt  div gt  x000D   x000D   lt div id  green-circle  class  circle-text  gt  x000D     lt span class  inner-text center-align  gt Big size circle lt  span gt  x000D     lt div gt  x000D       lt style gt  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       lt  style gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

Using this code it will be responsive also    lt div class  circle  gt ICON lt  div gt    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

User · Answer

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  x000D   x000D   circle     width  500px    height  500px    line-height  500px    border-radius  50     font-size  50px    color   fff    text-align  center    background   000   x000D   lt div class  circle  gt Hello I am A Circle lt  div gt  x000D   x000D   x000D

[css] How to draw a circle with text in the middle?

Examples related to css

Examples related to css-shapes