Comment puis-je centrer du texte sur une image sans utiliser Flexbox ?

Centrage du texte sur une image dans Flexbox

Flexbox, un système de mise en page polyvalent, est largement utilisé pour aligner le contenu. Cependant, pour cette tâche spécifique de centrage du texte sur une image, les propriétés de positionnement CSS offrent une solution plus simple et plus efficace.

Pour réaliser le centrage du texte sur une image, aucune flexbox n'est nécessaire. Suivez ces étapes :

1. Établir un ancêtre positionné le plus proche : Attribuez la propriété position: relative au conteneur externe (.height-100vh dans cet exemple) pour établir un ancêtre positionné le plus proche pour un positionnement absolu.
2. Utiliser le positionnement absolu pour le texte : Donnez le conteneur de texte (div.text) la position : propriété absolue. Cela vous permet de positionner précisément le texte par rapport à son élément parent.
3. Aligner horizontalement et verticalement : Définir à gauche : 50 % et en haut : 50 % pour aligner le texte horizontalement et verticalement dans le conteneur parent.
4. Centrer précisément : Appliquer une transformation de traduction (transform : translate(-50%, -50 % );) pour affiner le positionnement, en tenant compte de la moitié de la largeur et de la hauteur de l'élément pour un centrage précis.

Voici un extrait CSS mis à jour utilisant ces concepts :

.height-100vh {
    height: 100vh;
    position: relative;
}

.text {
    position: absolute;  
    left: 50%;                        
    top: 50%;                         
    transform: translate(-50%, -50%); 
}

Cette méthode centre efficacement le texte sur une image sans avoir besoin de flexbox. Il garantit un alignement précis et fonctionne sur plusieurs navigateurs, ce qui en fait une solution fiable pour vos besoins d'alignement.

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!