Comment centrer verticalement le texte et les icônes dans CSS

Cet article présentera une variété de méthodes de centrage horizontales et verticales CSS qui étaient autrefois difficiles mais qui sont maintenant faciles à mettre en œuvre. Nous couvrirons le centrage horizontal et vertical à l'aide de Flexbox et de positionnement plus transformations. Dans un autre article, nous couvrirons également la façon d'utiliser la grille CSS pour un centrage horizontal et vertical.

Résumé des points clés

• Utilisez du texte et des icônes centrés sur le Flexbox verticalement: convertissez les conteneurs en conteneurs flexibles et utilisez justify-content et align-items en éléments enfants centrés.
• La combinaison de position et transform peut atteindre un centrage vertical, en particulier pour les éléments très variables. Cela se fait en créant un contexte de positionnement et en ajustant la position de l'élément par rapport à son conteneur.
L'attribut
• line-height peut être utilisé pour centrer verticalement une seule ligne de texte ou d'icônes dans un conteneur de hauteur fixe, tandis que le vertical-align peut être utilisé pour centrer des éléments en ligne.

Comment utiliser Flexbox pour le centrage horizontal et vertical

Flexbox peut aligner les éléments horizontalement et verticalement, centrant ainsi du texte, des icônes ou tout autre élément de CSS.

Pour utiliser l'élément de centrage Flexbox, vous pouvez utiliser l'extrait de code suivant:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Cet extrait de code convertit .container en un conteneur flex, convertissant automatiquement ses éléments enfants en un projet Flex. Vous pouvez ensuite utiliser justify-content pour centrer ces éléments flexibles horizontalement et utiliser align-items pour centrer verticalement.

Afficher l'exemple: lien de codepen

Continuez à lire pour en savoir plus sur les techniques de positionnement et de positionnement verticales du modèle de boîte.

Comment utiliser la position et la transformation pour atteindre un centrage vertical flexible

Lorsque vous ne pouvez pas utiliser Flexbox ou que vous devez centrer un élément dans le conteneur, vous pouvez utiliser position pour placer l'élément au centre de son conteneur.

Au lieu de cela, nous pouvons combiner position et nous transformer en éléments très variables de centre verticalement. Par exemple, pour centrer un élément verticalement sur toute la hauteur de la fenêtre, vous pouvez utiliser l'extrait de code suivant:

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Nous créons d'abord le contexte de positionnement en définissant position: relative sur l'élément de conteneur. Cela nous permettra de localiser l'élément .vertical-center dans ses limites.

Ensuite, nous plaçons le coin supérieur gauche de l'élément à être centré au centre de son conteneur en plaçant son bord supérieur à 50% du haut de son élément parent et de son bord gauche à 50% de la gauche de son place élément parent.

Enfin, ajustez l'élément au centre en le panorant vers le haut de 50% de sa hauteur et 50% de sa largeur vers la gauche. Maintenant, nos éléments sont centrés verticalement et horizontalement dans le conteneur. Étant donné que le placement est effectué en utilisant un pourcentage de valeur par rapport à la taille de l'élément, l'élément restera centré si la largeur ou la hauteur du conteneur ou de l'élément enfant change.

Afficher l'exemple: lien de codepen

Comment utiliser la hauteur de ligne pour centrer verticalement à la hauteur fixe

Pour centrer une seule ligne de texte ou d'icône verticalement dans son conteneur, utilisez l'attribut line-height. Cette propriété contrôle la hauteur d'une ligne dans l'exécution du texte et ajoute une quantité égale d'espace au-dessus et au-dessous du filaire de l'élément en ligne. Si la hauteur du conteneur est connue, la définition du line-height de la même valeur neutre l'élément enfant verticalement.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Comment utiliser l'alignement vertical pour centrer les éléments en ligne

L'attribut

vertical-align affecte uniquement les éléments qui sont affichés comme inline, inline-block ou table-cell.

Il faut du long, un pourcentage ou une valeur de mot-clé.

la longueur et le pourcentage alignent la ligne de base d'un élément avec une distance donnée au-dessus de son élément parent de base.

La valeur des mots clés peut être l'une des éléments suivants:

• baseline
• sub
• super
• text-top
• text-bottom
• middle
• top
• bottom

La plupart d'entre eux sont très intuitifs, mais sub alignent la ligne de base avec la ligne de base de l'indice de l'élément parent, tandis que super alignent la ligne de base de l'élément avec la ligne de base en exposant de l'élément parent.

Jetons un coup d'œil à vertical-align dans un exemple pratique.

Voici une grille d'image et de texte, qui ont toutes deux des hauteurs différentes, ce qui signifie que le texte n'est pas tous soigneusement aligné.

(Le code HTML dans le texte d'origine doit être inséré ici et modifié en conséquence pour le rendre plus concis et facile à comprendre, et éviter d'utiliser des liens non valides)

Nous pouvons définir le conteneur de la grille sur display: inline-block et utiliser vertical-align: bottom sur l'image pour que tout soit soigneusement aligné.

S'il n'y a pas de texte ici, et que nous voulons que toutes les images soient centrées verticalement, nous pouvons utiliser vertical-align: middle et obtenir de très bons résultats.

Pour plus de méthodes de centrage, assurez-vous de vérifier comment utiliser la grille CSS pour le centrage horizontal et vertical.

FAQ sur la façon de centrer le texte et les icônes verticalement dans CSS

(La partie FAQ d'origine a été rationalisée ici, conservant les informations de base et exprimant quelques réponses plus clairement.)

Qu'est-ce que l'alignement vertical?

L'alignement vertical dans CSS est un attribut qui contrôle la position des éléments le long de l'axe vertical. Il s'agit d'un outil puissant qui vous aide à concevoir votre disposition avec précision et flexible. Il peut être utilisé pour centrer verticalement des éléments, les aligner avec le haut ou le bas du conteneur, ou les distribuer uniformément dans l'espace vertical. L'attribut vertical-align dans CSS est généralement utilisé avec des éléments de bloc en ligne ou en ligne, mais peut également être utilisé avec les cellules de table.

Comment utiliser CSS pour centrer verticalement le texte?

peut utiliser display: flex et align-items: center pour centrer le texte verticalement.

Pouvez-vous utiliser l'alignement vertical pour traiter les éléments au niveau du bloc?

Les éléments au niveau du bloc peuvent être alignés verticalement en utilisant position: relative; top: 50%; transform: translateY(-50%);.

Pourquoi mon alignement vertical ne fonctionne-t-il pas?

Les causes peuvent inclure le conteneur parent qui ne spécifie pas de hauteur ou tente d'aligner les éléments au niveau des blocs en utilisant vertical-align.

Comment aligner les images verticalement?

La même méthode que le texte peut être utilisée.

L'alignement vertical peut-il être utilisé pour gérer la grille CSS?

Les attributs

peuvent être utilisés. align-items

Comment aligner verticalement le texte dans les boutons?

peut être utilisé avec l'attribut

, dont la valeur doit être la même que la hauteur du bouton. line-height

Comment aligner plusieurs éléments verticalement?

Les méthodes de flexion ou de grille peuvent être utilisées.

Le positionnement absolu peut-il être géré en utilisant l'alignement vertical? Les propriétés

et

peuvent être utilisées. top transform

Comment aligner verticalement le texte dans les cellules de la table?

peut être utilisé

.

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!