在 CSS 中以圆形垂直和水平居中文本(如 iphone 通知徽章)

2022-01-14 00:00:00 geometry css cross-browser css-shapes

我正在寻找一种在 CSS3 中制作类似 iphone 的跨浏览器徽章的方法.我显然想为此使用一个 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.

关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度(高度是固定的)——它们应该能够处理 [在 ascii 绘图中] (1) 和 (1000)，其中 (1000) 不是完美的圆形，但看起来更像是一个胶囊.

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.

编辑:附加约束(来自 Steven):

EDIT: Additional constraints (from Steven):

  • 没有 JavaScript
  • 没有将 display 属性修改为 table-cell，这是有问题的支持状态

推荐答案

水平居中很简单:text-align: center;.可以通过将 line-height 设置为等于容器高度来实现元素内文本的垂直居中，但这在浏览器之间存在细微差别.在小元素上，比如通知徽章，这些更明显.

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.

最好将 line-height 设置为等于 font-size(或稍小)并使用填充.你必须调整你的身高以适应.

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.

这是一个纯 CSS 的单一 <div> 解决方案，看起来很像 iPhone.它们随着内容而扩展.

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

演示: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; /* 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>

相关文章