Question

我创建了一个伪元素来坐在无序列表上，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/

Answer 1

如果你想以Verticaly为中心，请使用top: calc(50% - 40px); 40px是元素的一半

Updated fiddle

编辑：

抱歉，更新后使用display: inline-flex;和align-items: center;

Fiddle

Answer 2

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

Answer 3

只要您可以更改伪元素的位置，那么这将起作用。

将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/

CSS如何在伪元素中垂直对齐文本

3 个答案: