CSS如何垂直对齐伪元素中的文本 [英] CSS how to vertically align text within a pseudo element

问题描述

我已经创建了一个伪元素，坐在一个无序列表，css如下：

I have created a pseudo element to sit over an unordered list, the css is as follows:

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

但是，伪元素里面的文本位于我的元素 - 有没有办法垂直居中？

However, with this, the text inside the pseudo element sits at the top of my element - is there a way to center it vertically?

这里是一个小提琴 http://jsfiddle.net/6dqxt2r3/

推荐答案

最简单的方法？添加填充顶部。

Easiest way? Add padding top. Little more difficult but better way, use 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/

这篇关于CSS如何垂直对齐伪元素中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！