Comment puis-je centrer les titres avec des lignes horizontales de chaque côté en utilisant CSS ?

CSS : titres centrés avec des lignes horizontales de chaque côté

Ce défi consiste à créer des titres de page (titres) centrés avec des lignes horizontales verticalement centré des deux côtés, tout en conservant la transparence pour une image d'arrière-plan.

Pour résoudre ce problème, envisagez la solution suivante :

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

Dans ce code :

• L'élément h1 est positionné relativement et centré horizontalement.
• Deux pseudo-éléments (:before et :after) sont utilisés pour créer les lignes horizontales de part et d'autre.
• Les lignes sont positionnées de manière absolue , défini à 51 % du haut et à la moitié de la largeur du titre.
• Pour créer la zone transparente autour du texte, la propriété de débordement de l'élément h1 est définie sur masqué.
• Pour garantir que les lignes sont masquées lors de la superposition du texte, un espace insécable (a0) leur est attribué comme contenu.
• La couleur de fond rouge rend les lignes facilement visibles à des fins de démonstration. Ajustez-le en fonction du style souhaité.

Cette solution centre efficacement les titres et crée les lignes horizontales souhaitées sans introduire d'éléments HTML supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!