垂直和水平居中C圈中的文本(例如iPhone通知徽章)
-
22-10-2019 - |
题
我正在寻找一种在CSS3中制作类似iPhone的徽章的方法。我显然想为此使用一个Div,但是替代解决方案会很好。重要的因素是它需要在所有浏览器中水平和垂直居中。
关于这些通知的一个有趣的设计问题是,它们不能具有指定的宽度(高度固定) - 他们应该能够处理[在ASCII绘图中](1)和(1000),其中(1000)不是一个完美的圆形圆圈,而是看起来更像是胶囊。
编辑: :其他约束(来自史蒂文):
- 没有JavaScript
- 没有将显示属性弄脏到表格,这是可疑的支持状态
解决方案
水平居中很容易: 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>
其他提示
如果您的身高未知,但您知道容器的高度。以下解决方案非常有效。
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's)展示的一个人:内联块; [SPAN]和[P]没有HTML空白空间,因此跨度不会占据任何空间。另外,我在CSS hack中添加了IE显示内联块。希望这对某人有帮助!
有趣的问题!尽管水平和垂直居中有很多指南,但对主题的权威待遇是明显的,其中居中的DIV是明显的。
让我们应用一些基本约束:
- 没有JavaScript
- 没有将显示属性弄脏到
table-cell
, ,这是可疑的支持状态
鉴于此,我进入竞争是使用 inline-block
显示属性以水平为中心的跨度在一个绝对位置的预定高度内,垂直居中以传统容器为中心 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/
不需要多余标记的替代解决方案,但可能会产生比其解决的更多问题是使用线路高度属性。不要这样做。但这在这里作为学术说明包括: http://jsfiddle.net/gucww/
这是与Zurb Foundation CSS Framework一起使用的平面徽章的示例
注意:您可能必须调整不同字体的高度。
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;
}