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/

来源

2015-10-15 Sam Skirrow

最简单的方法？添加填充顶部。更困难但更好的方式，使用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;

http://jsfiddle.net/6dqxt2r3/4/

来源

2015-10-15 16:52:43

Genuis，谢谢你，先生 - 今天晚上我们将在'flex'物业上看看！ –

如果要居中它verticaly使用top: calc(50% - 40px); 40像素是元素的一半

Updated fiddle

编辑：

对不起，更新使用display: inline-flex;和

Fiddle

来源

2015-10-15 16:50:23 user4675957

对不起，也许我的问题不明确，我期待居中伪元素中的文本，而不是元素本身。谢谢 –

只要你可以改变你如何定位伪元素，那么这将正常工作。

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

http://jsfiddle.net/hungerstar/6dqxt2r3/5/

来源

2015-10-15 16:54:12 hungerstar

CSS如何垂直

回答

相关问题