在 :after 元素中居中内容

Question

我这里有一个 jsfiddle - http://jsfiddle.net/Lxve3ubd/

我正在创建一个包含“+”的 :after 元素

元素有圆形边框。

我需要让“+”在圆圈中居中，我还需要增加“+”的大小。

是否可以将此内容居中。

    .box{
        background: red;
        height: 100px;
        margin: 50px;
        width: 100px;
        position: relative;
    }

    .box:after{
        border: 2px solid red;
        border-radius: 30px;
        content: "+";
        display: inline-block;
        height: 40px;
        font-size: 2.5em;
        //line-height: 2.5em;
        position: absolute;
        top: 0;
        right: -100px;
        width: 40px;
        vertical-align: center;
        padding: 0;
    }

Answer 1

你可以这样使用

.box::after {
    border: 2px solid red;
    border-radius: 30px;
    content: "+";
    display: inline-block;
    font-size: 2.5em;
    height: 40px;
    line-height: 36px;
    padding: 0;
    position: absolute;
    right: -100px;
    text-align: center;
    top: 0;
    width: 40px;

希望对你有所帮助

Answer 2

最简单的方法是添加 line-height: 40px（只有当您确定文本在一行时才有效）和 text-align: center; 到 .box:after.

.box{
    background: red;
    height: 100px;
    margin: 50px;
    width: 100px;
    position: relative;
}

.box:after{
    border: 2px solid red;
    border-radius: 30px;
    content: "+";
    display: inline-block;
    height: 40px;
    font-size: 2.5em;
    //line-height: 2.5em;
    position: absolute;
    top: 0;
    right: -100px;
    width: 40px;
    vertical-align: center;
    padding: 0;
    text-align: center;
    line-height: 40px;
}

<div class="box"></div>

在 :after 元素中居中内容

Center content in a :after element

css

position