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

概述我创建了一个伪元素来坐在无序列表上,css如下： .pricing-column.featured::after { content: "Most Popular"; background: #52BDE6 none repeat scroll 0% 0%; color: #FFF; width: 80px; border-radius: 100%; 我创建了一个伪元素来坐在无序列表上,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;

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

总结

以上是内存溢出为你收集整理的html – CSS如何在伪元素中垂直对齐文本全部内容，希望文章能够帮你解决html – CSS如何在伪元素中垂直对齐文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。