我想在H3之前和之后以他的元素为中心,目前我有这个:

的HTML

<h2>Nos réalisations dans la région</h2>


的CSS

h2 {
    font-size: 35px;
    font-weight: 300;
    margin-top: 0;
    color: #fff;
    position: relative;
    text-transform: uppercase;
    float: left;
}
h2::before {
    content: '';
    width: 60px;
    height: 5px;
    background: #248290;
    position: absolute;
    bottom: -9px;
    left: 0;
}
h2::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #248290;
    position: absolute;
    bottom: -7px;
    left: 0;
}


我想像照片一样集中所有元素。

css - 使用:: before和:: after元素进行中心 float-LMLPHP

css - 使用:: before和:: after元素进行中心 float-LMLPHP

最佳答案

一种解决方案。还有更多,但这很简单。左移至50%,并使用负边距减去元素宽度的一半。



h2 {
    font-size: 35px;
    font-weight: 300;
    margin-top: 0;
    color: #fff;
    position: relative;
    text-transform: uppercase;
    float: left;
    background: #333;
}
h2::before {
    content: '';
    width: 60px;
    height: 5px;
    background: #248290;
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left:-30px;
}
h2::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #248290;
    position: absolute;
    bottom: -7px;
    left: 0;
}

<h2>Nos réalisations dans la région</h2>

关于css - 使用:: before和:: after元素进行中心 float ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38632877/

10-11 23:29
查看更多