Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I'm looking for a way of to do a cross-browser iphone-like badge in CSS3. I'd obviously like to use one div for this, but alternative solutions would be fine. The important factor is that it needs to be horizontally and vertically centered in all browsers.

An interesting design issue about these notifications is that they cannot have a specified width (height is fixed) - they should be able to handle [in ascii drawing] (1) and (1000), where (1000) is not a perfectly rounded circle, but instead looks more like a capsule.

EDIT: Additional constraints (from Steven):

  • No JavaScript
  • No mangling of the display property to table-cell, which is of questionable support status
like image 974
Matt Avatar asked Jan 26 '11 03:01

Matt


People also ask

How do I center text vertically and horizontally centered in CSS?

To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.

How do you center text horizontally and vertically?

Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.

How do I center text in a shape in CSS?

To center text in CSS, use the text-align property and define it with the value “center.”


1 Answers

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:

enter image description here

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> 
like image 68
ThinkingStiff Avatar answered Oct 20 '22 18:10

ThinkingStiff