Comment puis-je centrer le texte dans les conteneurs Flex lorsque le contenu dépasse la largeur du conteneur ?

Problèmes d'alignement du texte avec les conteneurs Flex

Lors de l'utilisation de conteneurs Flex (affichage : flex), il peut y avoir des difficultés à aligner le texte lorsque le contenu dépasse la largeur du conteneur. Pour comprendre ce problème, il est important de se plonger dans la structure HTML d'un conteneur flexible.

Structure à trois niveaux

Un conteneur flexible se compose de trois couches distinctes :

• Conteneur :Le conteneur flexible lui-même
• Article : L'élément flexible individuel
• Contenu : Élément(s) au sein de l'élément

Chaque La couche représente une entité indépendante, ce qui signifie que les propriétés d'alignement définies sur le conteneur et l'élément n'affectent pas directement l'alignement du content.

Justify-Content et alignement du texte

La propriété justifier-content régit l'alignement des éléments flexibles dans le conteneur. Il ne contrôle pas directement l'alignement du contenu au sein des éléments.

Lorsque justifier-content: center est appliqué à un conteneur de direction de ligne, les éléments flexibles se rétréciront à la largeur de leur contenu et seront centrés horizontalement. . Cependant, si le contenu dépasse la largeur du conteneur, les éléments ne peuvent pas être centrés.

Dans ce scénario, le contenu est aligné à gauche par défaut, quel que soit le paramètre de justification du contenu. Pour centrer explicitement le texte, il est nécessaire d'appliquer text-align: center à l'élément flex ou à son conteneur.

Exemple de démonstration

Dans l'extrait CSS fourni, la classe flex applique justifier-content : center, mais le contenu s'enroule et s'aligne à gauche lorsque sa largeur dépasse celle du conteneur.

En ajoutant text-align: center au .center, qui est appliquée à l'élément p, le texte devient correctement centré, même avec une largeur de contenu excessive.

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!