CSS如何垂直
问题描述:
我创建了一个伪元素坐了一个无序列表伪元素中的文本对齐时,CSS如下:CSS如何垂直
.pricing-column.featured::after {
content: "Most Popular";
background: #52BDE6 none repeat scroll 0% 0%;
color: #FFF;
width: 80px;
border-radius: 100%;
position: absolute;
top: -10px;
left: -10px;
z-index: 1000;
text-transform: uppercase;
font-weight: 700;
font-size: 0.9em;
line-height: 0.9em;
padding: 10px;
display: inline-block;
height: 80px;
}
然而,与此相关,伪元素中的文本坐在我的元素的顶部 - 有没有办法让它垂直居中?
这里是一个小提琴http://jsfiddle.net/6dqxt2r3/
答
最简单的方法?添加填充顶部。更困难但更好的方式,使用flexbox。
这些属性将做
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
答
如果要居中它verticaly使用top: calc(50% - 40px);
40像素是元素的一半
编辑:
对不起,更新使用display: inline-flex;
和
+0
对不起,也许我的问题不明确,我期待居中伪元素中的文本,而不是元素本身。谢谢 –
答
只要你可以改变你如何定位伪元素,那么这将正常工作。
更改position: absolute;
至position: relative;
并相应地调整top
和left
值。
将文本居中应用display: table-cell;
,text-align: center;
和vertical-align: middle
。
.pricing-column.featured::after {
content: "Most Popular";
background: #52BDE6 none repeat scroll 0% 0%;
color: #FFF;
width: 80px;
border-radius: 100%;
position: relative;
top: -35px;
left: -90px;
z-index: 1000;
text-transform: uppercase;
font-weight: 700;
font-size: 0.9em;
line-height: 0.9em;
padding: 10px;
display: table-cell;
height: 80px;
text-align: center;
vertical-align: middle;
}
Genuis,谢谢你,先生 - 今天晚上我们将在'flex'物业上看看! –