在CSS中的圆形中垂直和水平居中文本（如iphone通知徽章） [英] Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

问题描述

我正在寻找一种在CSS3中做一个跨浏览器iphone类徽章的方法。我显然喜欢使用一个div，但替代解决方案将是好的。重要的因素是它需要在所有浏览器中水平和垂直居中。

这些通知的一个有趣的设计问题是，他们不能有一个指定的宽度（高度是固定的） - 他们应该能够处理[在ascii图]

EDIT ：附加约束条件（1000），其中（1000）不是一个完美的圆形圆， （来自Steven）：

• 无JavaScript


• 不会将display属性转换为table-cell ，这是有问题的支持状态

水平居中很容易： text-align：center; 。可以通过将 line-height 设置为等于容器的高度来实现文本在元素内的垂直居中，但这在浏览器之间有细微的差别。

更好的是设置 line-height 等于到 font-size （或稍小）并使用填充。

这里是一个仅限CSS，单独< div> 看起来很像iPhone的解决方案。

演示： http：// jsfiddle.net/ThinkingStiff/mLW47/

输出：

CSS：

  .badge {
 background：radial-gradient（5px -9px，circle，white 8％，red 26px）; 
 background-color：red; 
 border：2px solid white; 
 border-radius：12px; / *一半（（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> 
  

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

解决方案

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>

这篇关于在CSS中的圆形中垂直和水平居中文本（如iphone通知徽章）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！