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):
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
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.
To center text in CSS, use the text-align property and define it with the value “center.”
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:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With