Vertically and Horizontally Centering Text in Circle in CSS (Like iPhone Notification Badge)

Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-height equal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced.

Better is to set line-height equal to font-size (or slightly smaller) and use padding. You'll have to adjust your height to accomodate.

Here's a CSS-only, single <div> solution that looks pretty iPhone-like. They expand with content.

Demo: http://jsfiddle.net/ThinkingStiff/mLW47/

Output:

Sample Image

CSS:

.badge {
    background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px; 
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
}

HTML:

<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>

CSS HTML center text in circle

I would use flexbox for this

.circle{
    border-radius: 50%;
    background-color: #0276FD; 
    border: 12px solid #0276FD;
    color: black;
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    text-align: center;   
    
    display: flex;
    justify-content: center;
    align-items: center;
}

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

How to draw a circle with text in the middle?

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>

Cross browser vertical centering for text inside a circle

.quantity-badge {
  display: block; /*Changed this*/
  width: 24px;
  height: 24px;
  line-height:24px; /*Added this*/
  padding:10px; /*Added this*/
  text-align: center;
  vertical-align: middle;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%; /*Added this*/
  background-color: #0896ea;
}

I hope this can begin to help you out. Here is a fork of the code you posted: http://codepen.io/anon/pen/EKNevV

Why text is pushed towards the top of the circle

Try to do a trick using percentage on the padding top and bottom and set the height element to zero.

.ui-monthpicker-month { 
   color: #333333; 
   border-radius: 100% !important;
   height: 0 !important;
   padding-top: 13% !important;
   padding-bottom: 20% !important; 
}

.ui-monthpicker-month:hover {
    background-color: #1474A4 !important;
    color: #fff;
}

And here is the screenshots:

------------------------------ PC ------------------------------

------------------------------ Tablet ------------------------------

Tablet

------------------------------ Phone ------------------------------

Phone

Vertically align letter in span that scales with the height of the letter

Use this line of code too:

line-height:1.8em;

Check your Demo Fiddle

How to center text within a border-radius?

is this what you want?

div {  height: 30px;  width: 30px;  border: 1px solid black;  border-radius: 50%;  display: inline-block;}
span {  display: inline-block;  margin-top: 50%;  margin-left: 50%;  transform: translate(-50%, -50%);}

<div>  <span>  A</span></div>
<div>  <span>  B</span></div>
<div>  <span>  C</span></div>
<div>  <span>  D</span></div>

Center link text in a circle

Simply apply the .circle to the <a> tag: http://jsfiddle.net/rFZBA/16/

And then do some little modifications so that the size is good.

It's automatically centered here as the border is around the text and the text is of quadratic size (a single +). Also, don't forget to make the line-height equal to the height and with, so that's centered vertically.

CSS3 iOS badge text not vertically centering

I believe this is a problem of font metrics. Using line-height to make the vertical alignment may give different results from browser to browser depending on how they render text. I would suggest to use padding to balance out vertical spacing, such as:

.alert-notify-circle {
min-width:.5em;
height:1.3em;
padding:0 .375em;
font:bold 1em Arial;
line-height:1.4em;
color: white;
border-radius: 1em;
border: 2px solid white;
box-shadow: 0 .25em .4em rgba(0,0,0,.33);
background-clip:padding-box;

background-color:#e91823;
background-image: linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -o-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -ms-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -moz-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -webkit-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9BABD), color-stop(0.5, #ED3F48), color-stop(0.5, #E91822), color-stop(1, #C50104));

}

Check out this badge I built for you as an example. I updated it for better cross-browser compatibility:

http://jsfiddle.net/x2xjB/3/

Vertically and Horizontally Centering Text in Circle in CSS (Like iPhone Notification Badge)