Comment centrer le texte sur une image à l'aide du positionnement Flexbox ou CSS ?

Centrer le texte sur une image à l'aide de Flexbox

Question : Comment pouvons-nous centrer le texte sur une image à l'aide de Flexbox ?

Alternative Solution :

Bien que l'utilisation de Flexbox soit une option, il n'est pas nécessaire de centrer le texte sur une image. Les propriétés de position CSS offrent une solution plus simple :

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

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

1. Établir un conteneur CSS : pour les deux méthodes, un conteneur CSS (hauteur-100vh) est requis pour positionner le contenu.
2. Positionnement absolu : l'élément de texte est positionné de manière absolue dans le conteneur.
3. Alignement horizontal et vertical : gauche : 50 % ; et haut : 50 % ; centrez l'élément de texte horizontalement et verticalement.
4. Centrage précis : la propriété de transformation affine le positionnement en traduisant l'élément en arrière de 50 % dans les deux axes.

Flexbox Solution :

Si Flexbox est préféré, voici comment centrer le texte sur un image :

.height-100vh {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

1. Conteneur flexible : Le conteneur (hauteur-100vh) est configuré comme un conteneur flexible avec une direction de flexion verticale.
2. Positionnement du texte : Comme auparavant, le l'élément de texte est positionné et centré de manière absolue avec gauche : 50 %, haut : 50 % et transformation : traduire (-50 %, -50%).
3. Alignement de l'axe principal : aligner les éléments : centre ; centre verticalement le contenu dans le conteneur flexible.

Bien que les deux méthodes fonctionnent, l'approche de positionnement CSS est plus simple et évite le besoin de Flexbox lors de l'alignement du texte sur une image.

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!