当前位置：文江博客话题详情

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

发布于 2024-10-14 07:02:45 字数 331 浏览 3 评论 0原文

我正在寻找一种在 CSS3 中制作类似 iphone 的跨浏览器徽章的方法。我显然想使用一个 div 来实现这一点，但其他解决方案也可以。重要的因素是它需要在所有浏览器中水平和垂直居中。

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

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

没有 JavaScript
没有对表格单元格的显示属性进行修改，这是有问题的支持状态

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-黛色若梦 2024-10-21 07:02:45

水平居中很简单：text-align: center;。元素内文本的垂直居中可以通过将 line-height 设置为等于容器高度来完成，但这在浏览器之间存在细微的差异。在通知徽章等小元素上，这些效果更加明显。

更好的方法是将 line-height 设置为 font-size （或稍小）并使用填充。您必须调整身高以适应。

这是一个纯 CSS 的单个

解决方案，看起来非常像 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>

Horizontal centering is easy: text-align: center;. Vertical centering of text inside an element can be done by setting line-height equal to the container height, but this has subtle differences between browsers. On small elements, like a notification badge, these are more pronounced.

Better is to set line-height equal to font-size (or slightly smaller) and use padding. You'll have to adjust your height to accomodate.

Here's a CSS-only, single <div> solution that looks pretty iPhone-like. They expand with content.

Demo: http://jsfiddle.net/ThinkingStiff/mLW47/

Output:

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>

回复收藏 0 原文

弱骨蛰伏 2024-10-21 07:02:45

现代解决方案

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

.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

使用 TailwindCSS 来实现相同的效果。这很简单...

<div class="w-12 h-12 inline-flex bg-yellow-400 rounded-full"><span class="place-self-center">text</span></div>

Modern Solution

The result is that the circle never gets distorted and the text stays exactly in the middle of the circle - vertically and horizontally.

.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

To achieve the same use TailwindCSS. This is as simple as...

<div class="w-12 h-12 inline-flex bg-yellow-400 rounded-full"><span class="place-self-center">text</span></div>

回复收藏 0 原文

最偏执的依靠 2024-10-21 07:02:45

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

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

没有 Javascript
不能对 table-cell 的显示属性进行修改，这是有问题的支持状态

鉴于此，我进入争论的是使用 inline- block display 属性将跨度在预定高度的绝对定位 div 内水平居中，在传统的 top: 50% 中在父容器内垂直居中； margin-top: -123px 时尚。

标记： 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/

Interesting question! While there are plenty of guides on horizontally and vertically centering a div, an authoritative treatment of the subject where the centered div is of an unpredetermined width is conspicuously absent.

Let's apply some basic constraints:

No Javascript
No mangling of the display property to table-cell, which is of questionable support status

Given this, my entry into the fray is the use of the inline-block display property to horizontally center the span within an absolutely positioned div of predetermined height, vertically centered within the parent container in the traditional top: 50%; margin-top: -123px fashion.

Markup: 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; }

Source: http://jsfiddle.net/38EFb/

An alternate solution that doesn't require extraneous markups but that very likely produces more problems than it solves is to use the line-height property. Don't do this. But it is included here as an academic note: http://jsfiddle.net/gucwW/

回复收藏 0 原文

白昼 2024-10-21 07:02:45

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

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 的显示内联块。希望这对某人有帮助！

If you have content with height unknown but you know the height the of container. The following solution works extremely well.

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; 
 }

EXAMPLE
http://jsfiddle.net/thenewconfection/eYtVN/

One gotcha for newby's to display: inline-block; [span] and [p] have no html white space so that the span then doesn't take up any space. Also I've added in the CSS hack for display inline-block for IE. Hope this helps someone!

回复收藏 0 原文

不回头走下去 2024-10-21 07:02:45

这是一个与 zurb Foundation 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;
}

Here is an example of flat badges that play well with zurb foundation css framework
Note: you might have to adjust the height for different fonts.

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

The Magic sauce!

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

回复收藏 0 原文

恋你朝朝暮暮 2024-10-21 07:02:45

这是我使用的代码，实际上在我的文本

HTML

<!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
}

Here's the code I used that ACTUALLY created a circle around my text

HTML

<!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
}

回复收藏 0 原文

~没有更多了~