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

by

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>

More Related Contents:

  1. How do CSS triangles work?
  2. Responsive CSS triangle with percents width
  3. How to disable text selection highlighting
  4. How can I show only corner borders?
  5. Same font except its weight seems different on different browsers
  6. Invert rounded corner in CSS?
  7. Transparent hollow or cut out circle
  8. How to skew element but keep text normal (unskewed)
  9. Inset border-radius with CSS3
  10. How to make 3-corner-rounded triangle in CSS
  11. Wave (or shape?) with border on CSS3
  12. How to create a curve on the top of a background?
  13. Easier way to create circle div than using an image?
  14. How can I create a “tooltip tail” using pure CSS?
  15. Segments in a circle using CSS3
  16. complete styles for cross browser CSS zoom
  17. Why doesn’t [CSS feature] work in [browser] but works in others?
  18. How to make a circle around content using CSS?
  19. Adjacent divs with angled borders? [duplicate]
  20. IE7 and the CSS table-cell property
  21. Are CSS selectors case-sensitive?
  22. “text-decoration” and the “:after” pseudo-element, revisited
  23. How to create an irregular square shape in css?
  24. Filling water animation
  25. Creating an Isoceles Trapezoid shape
  26. Make table cells square
  27. Rounded side, not rounded corners
  28. Styling browser-native video controls
  29. Creating a droplet like border effect in css
  30. IE6/IE7 css border on select element

Leave a Comment