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

Question

我创建了一个伪元素来覆盖无序列表，css如下：

ul.pricing-column {
  width: 200px;
  height: 400px;
  background: red;
  position: relative;
  margin: 50px;
}

.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;
  text-align: center;
}

<ul class="pricing-column featured">
</ul>

然而，有了这个，伪元素内的文本位于我的元素的顶部 - 有没有办法使其垂直居中？

这里是a fiddle

Answer 1

如果你想让它垂直居中使用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 如何在伪元素中垂直对齐文本

CSS how to vertically align text within a pseudo element

html

css

pseudo-element