Zentrum Float mit :: vor und :: nach Elementen

Question

Ich möchte nach einem H3 mit seinen Elementen zu zentrieren und vor, für den Moment, ich habe dies:

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

Ich möchte alle Elemente wie das Foto zentrieren.

Answer 1

Eine Lösung. Es gibt mehr, aber das ist sehr einfach. Positionierung links auf 50% und subtrahieren die Hälfte der Elementbreite mit negativen Rand.

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>