垂直和水平居中C圈中的文本（例如iPhone通知徽章）

Question

我正在寻找一种在CSS3中制作类似iPhone的徽章的方法。我显然想为此使用一个Div，但是替代解决方案会很好。重要的因素是它需要在所有浏览器中水平和垂直居中。

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

编辑: ：其他约束（来自史蒂文）：

• 没有JavaScript
• 没有将显示属性弄脏到表格，这是可疑的支持状态

Answer 1

水平居中很容易： 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; /* 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>

Answer 2

如果您的身高未知，但您知道容器的高度。以下解决方案非常有效。

html

<div class="center-test">
    <span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Nesciunt obcaecati maiores nulla praesentium amet explicabo ex iste asperiores 
    nisi porro sequi eaque rerum necessitatibus molestias architecto eum velit 
    recusandae ratione.</p>
</div>

CSS

.center-test { 
   width: 300px; 
   height: 300px; 
   text-align: 
   center; 
   background-color: #333; 
}
.center-test span { 
   height: 300px; 
   display: inline-block; 
   zoom: 1; 
   *display: inline; 
   vertical-align: middle; 
 }
.center-test p { 
   display: inline-block; 
   zoom: 1; 
   *display: inline; 
   vertical-align: middle; 
   color: #fff; 
 }

例子http://jsfiddle.net/thenewconfection/eytvn/

纽比（Newby's）展示的一个人：内联块； [SPAN]和[P]没有HTML空白空间，因此跨度不会占据任何空间。另外，我在CSS hack中添加了IE显示内联块。希望这对某人有帮助！

Answer 3

有趣的问题！尽管水平和垂直居中有很多指南，但对主题的权威待遇是明显的，其中居中的DIV是明显的。

让我们应用一些基本约束：

• 没有JavaScript
• 没有将显示属性弄脏到 table-cell, ，这是可疑的支持状态

鉴于此，我进入竞争是使用 inline-block 显示属性以水平为中心的跨度在一个绝对位置的预定高度内，垂直居中以传统容器为中心 top: 50%; margin-top: -123px 时尚。

标记： div > div > span

CSS：

body > div { position: relative; height: XYZ; width: XYZ; }
div > div { 
  position: absolute;
  top: 50%;
  height: 30px;
  margin-top: -15px; 
  text-align: center;}
div > span { display: inline-block; }

资源： http://jsfiddle.net/38efb/

---

不需要多余标记的替代解决方案，但可能会产生比其解决的更多问题是使用线路高度属性。不要这样做。但这在这里作为学术说明包括： http://jsfiddle.net/gucww/

Answer 4

这是与Zurb Foundation CSS Framework一起使用的平面徽章的示例
注意：您可能必须调整不同字体的高度。

http://jsfiddle.net/jamesharrington/xqr5nx1o/

魔术酱！

.label {
  background:#EA2626;
  display:inline-block;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  height: 17px; 
  padding: 2px 3px 2px 3px;
  text-align: center;
  min-width: 16px;
}