带有 ::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% 并使用负边距减去元素宽度的一半。

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>

带有 ::before 和 ::after 元素的中心浮动

Center Float with ::before and ::after elements

css

css-float