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

我正在寻找一种在 CSS3中做一个跨浏览器的类似 iphone 的徽章的方法。我当然希望使用一个 div，但是可以使用其他解决方案。重要的因素是它需要在所有浏览器中水平和垂直居中。

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

额外的限制(来自 Steven) :

  • 没有 JavaScript
  • 不会将显示属性损坏到表单元格，因为表单元格的支持状态有问题
151589 次浏览
小开

有趣的问题！虽然有很多关于水平和垂直居中的 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/

小开
最佳答案

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

更好的方法是将 line-height设置为等于 font-size(或稍小一些)并使用填充。你必须调整你的身高来适应。

这是一个只有 CSS 的单一 <div>解决方案，看起来非常像 iPhone。

演示: http://jsfiddle.net/ThinkingStiff/mLW47/

产出:

enter image description here

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>
小开

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

超文本标示语言

<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 不会占用任何空间。此外，我已经添加了在显示内联块的 IE CSS 黑客。希望这对谁有帮助！

小开

这里是一个平面徽章的例子，发挥良好的祖尔伯基础 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;
}
小开

现代解决方案

其结果是，圆从来没有得到扭曲和文字保持正好在中间的圆-垂直和水平。

.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>

Tailwind CSS

If you'd like to achieve the same using a modern framework - TailwindCSS. This is as simple as...

<div class="w-12 h-12 flex items-center justify-center bg-yellow-400 rounded-full">text</div>
小开

下面是我使用的代码，它实际上在我的文本周围创建了一个圆圈

超文本标示语言

<!DOCTYPE html>
<html>
<head>
<br></br><br></br><br></br><br></br><br></br>
<title>Introducing CSS</title>
<link href="CSS.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>
<span class="three">Garden</span>
</h1>
</body>
</html>

CSS

body {
font-family: Arial, Verdana, sans-serif;
}
h1, h2 {
color: #ee3e80;
}
p {
color: #665544;
}


span {
padding: 80px;
background: gold;
width: 40px;
height: 40px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1em
}

提交答案