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

Posted 2023-03-06

【中文标题】在 CSS 中以圆形垂直和水平居中文本（如 iphone 通知徽章）

【英文标题】：Vertically and horizontally centering text in circle in CSS (like iphone notification badge)

【发布时间】：2011-06-15 15:07:11

【问题描述】：

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

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

编辑：附加约束（来自 Steven）：

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

【参考方案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>

【讨论】：

How can I get to use this with a draggable event? The moment class is changed to class="ui-widget-content", the entire functionality is gone out of line...

【参考方案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>

简单易用。享受吧！

【讨论】：

完美解决方案！谢谢！ @Armand

【参考方案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 空白，因此 span 不会占用任何空间。我还在 CSS hack 中添加了用于 IE 的显示内联块。希望这对某人有帮助！

【参考方案4】：

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

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

没有 Javascript 显示属性未更改为 table-cell，其支持状态存在问题

鉴于此，我的加入是使用 inline-block 显示属性将跨度水平居中在预定高度的绝对定位的 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/

【讨论】：

反应非常好！不幸的是，它并不完全在那里。原因如下：垂直居中div > span 的容器不会随着新宽度的增加而增长。在您的实现中，会将最外层的 div 视为胶囊，将 div > span 视为文本。当你从 1 秒到 10 秒，再到 100 秒时，你绝对需要胶囊成长。很棒的努力！

1s、10s、100s是什么意思？

在 ascii 艺术中 - (1) 到 (10) 到 (100) 通知。清楚吗？

恐怕不行。你能编辑我的first fiddle 来展示你的案例吗？

@sdlei：是的，这是自己强加的。唯一的原因是我个人对使用一个不太好的属性defined 开始感到不舒服，而且根本没有在表格的上下文之外定义。我从未深入研究过在非表格单元格元素上使用display: table-cell 的后果，尽管我欢迎任何关于此事的教育。

【参考方案5】：

这是一个与 zurb 基础 css 框架配合良好的平面徽章示例 注意：您可能需要调整不同字体的高度。

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;

【讨论】：

基于ThinkingStiff的回答