70

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

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

编辑：附加约束（来自史蒂文）：

  • 没有 JavaScript
  • 没有将显示属性修改为表格单元格，这是有问题的支持状态
4

5 回答 5

134

水平居中很容易：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>
于 2012-01-22T23:16:26.290 回答
50

现代解决方案

结果是圆圈永远不会变形，并且文本完全位于圆圈的中间 - 垂直和水平。

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

简单易用。享受！

于 2020-02-08T22:37:39.103 回答
6

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

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/

新手要显示的一个问题：inline-block；[span] 和 [p] 没有 html 空白，因此 span 不会占用任何空间。我还在 CSS hack 中添加了用于 IE 的显示内联块。希望这对某人有帮助！

于 2012-11-29T13:51:36.753 回答
5

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

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

  • 没有 Javascript
  • 没有修改显示属性到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/

于 2011-01-26T03:48:45.237 回答
2

这是一个与 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;
}
于 2014-12-03T16:15:27.113 回答