Question

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

我正在创建一个包含'+'

的元素

该元素具有圆形边框。

我需要将'+'置于圆圈中心，我还需要增加'+'的大小。

是否可以将这些内容集中在一起。

    .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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以像这样使用

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

我希望它会对你有所帮助。

中心内容在a：after元素之后

2 个答案: