Comment puis-je centrer du texte sur une image à l'aide de Flexbox et du positionnement CSS ?

Centrer le texte sur une image dans Flexbox et positionnement CSS

Centrer le texte sur une image est une exigence de mise en page courante. Bien que Flexbox offre de puissantes options d'alignement, vous pouvez également obtenir cet effet avec les propriétés de positionnement CSS.

Utilisation du positionnement absolu

Pour centrer le texte sur une image à l'aide du positionnement absolu :

• Définissez une valeur de position statique pour le corps afin d'établir un ancêtre positionné pour l'absolu. positionnement.
• Positionner absolument l'élément de texte.
• Centrer horizontalement le texte avec gauche : 50% ; et centrez-le verticalement avec top : 50 % ;.
• Utilisez une transformation pour affiner le centrage en le traduisant de la moitié de sa largeur et de sa hauteur.

Utilisation de Flexbox

Alternativement, Flexbox peut être utilisé à la fois pour l'image et le texte positionnement :

• Enveloppez les éléments d'image et de texte dans un conteneur Flexbox avec une propriété height.
• Définissez align-items: center; et justifier-contenu : centre ; pour aligner les éléments verticalement et horizontalement dans le conteneur.
• Positionnez absolument l'élément de texte dans le conteneur et stylisez-le comme vous le souhaitez.

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!