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

Question

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

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

编辑:附加约束(来自史蒂文):

• 没有JavaScript
• 没有将display属性重命名为table-cell,这是一个有问题的支持状态

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

现代解决方案

结果是圆圈永远不会扭曲，文本正好位于圆圈的中间 - 垂直和水平。

.circle {
  background: gold;
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
}

<div class="circle">text</div>

简单易用。享受！

Answer 3

如果您的内容高度未知,但您知道容器的高度.以下解决方案非常有效.

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的一个问题是显示:inline-block; [span]和[p]没有html空格,因此跨度不会占用任何空间.另外我在CSS hack中添加了IE的显示内联块.希望这有助于某人!

Answer 4

有趣的问题！虽然有很多关于水平和垂直居中 div 的指南，但显然缺乏对居中 div 的宽度不确定的主题的权威处理。

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

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

鉴于此，我进入争论的是使用inline-blockdisplay 属性在预定高度的绝对定位的 div 内水平居中跨度，在传统的父容器内垂直居中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/

另一种不需要无关标记但很可能会产生比它解决的问题更多的问题的替代解决方案是使用 line-height 属性。不要这样做。但它作为学术笔记包含在这里：http : //jsfiddle.net/gucwW/