Center Float with :: before和:: after元素

Question

我希望将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;
}

我想把所有元素都集中在照片上。

Answer 1

一种解决方案。还有更多，但这很简单。将左侧定位为50％并使用负边距减去元素宽度的一半。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;