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

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

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

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

>没有JavaScript
>不显示属性到table-cell，这是有问题的支持状态

解决方法

水平居中很容易：text-align：center ;.文本在元素内的垂直居中可以通过设置行高等于容器的高度来实现，但是这在浏览器之间有细微的差别。对于小元素，如通知徽章，这些更加明显。

更好的是设置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; /* 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>

原文地址：https://www.jb51.cc/css/222114.html