Wie kann ich mit CSS Überschriften mit horizontalen Linien auf beiden Seiten zentrieren?

CSS: Zentrierte Überschriften mit horizontalen Linien auf beiden Seiten

Bei dieser Herausforderung geht es darum, Seitentitel (Überschriften) zu erstellen, die vertikal mit horizontalen Linien zentriert sind auf beiden Seiten zentriert, wobei die Transparenz für ein Hintergrundbild erhalten bleibt.

Um dieses Problem zu beheben, ziehen Sie die folgende Lösung in Betracht:

<code class="css">h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}</code>

In diesem Code:

• Das h1-Element wird relativ und horizontal zentriert positioniert.
• Zwei Pseudoelemente (:before und :after) werden verwendet, um die horizontalen Linien auf beiden Seiten zu erzeugen.
• Die Linien werden absolut positioniert , eingestellt auf 51 % vom oberen Rand und die halbe Breite der Überschrift.
• Um den transparenten Bereich um den Text herum zu erstellen, wird die Überlaufeigenschaft des h1-Elements auf ausgeblendet gesetzt.
• Um sicherzustellen, dass die Linien beim Überlappen mit dem Text ausgeblendet werden, erhalten sie als Inhalt ein geschütztes Leerzeichen (a0).
• Durch die rote Hintergrundfarbe sind die Linien zu Demonstrationszwecken gut sichtbar. Passen Sie es an Ihren gewünschten Stil an.

Diese Lösung zentriert effektiv die Überschriften und erstellt die gewünschten horizontalen Linien, ohne zusätzliche HTML-Elemente einzuführen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Überschriften mit horizontalen Linien auf beiden Seiten zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!