6 astuces CSS pour aligner le contenu verticalement
Parlons de l'alignement vertical en CSS, ou plus précisément de ce qui n'est pas faisable. CSS n'a pas encore fourni de moyen officiel pour centrer le contenu verticalement dans son conteneur. C'est un problème qui a probablement frustré les développeurs Web partout. Mais ne vous inquiétez pas, dans cet article, nous allons vous présenter quelques astuces qui peuvent vous aider imiter l'effet.
Ces astuces peuvent cependant avoir des limites, et vous devrez peut-être utiliser plus d'un tour pour compléter l'illusion. Si vous connaissez une autre astuce, laissez-nous savoir dans les commentaires.
1. Utiliser le positionnement absolu
Le premier tour que nous allons voir ici utilise le Nous allons d'abord définir la position de l'élément conteneur sur relative, puis nous allons définir la position de l'élément enfant sur Pour l'aligner verticalement, déplacez la position de l'élément enfant du haut vers le haut de la moitié de la hauteur du conteneur, puis tirez-la vers le haut de la moitié de la largeur de l'élément enfant. Voici la sortie: Cette astuce est parfaite quand il n’ya qu’un seul élément enfant, sinon le Transformation CSS3 a facilité la tâche de placer le contenu au centre. CSS3 Transform, contrairement au En supposant que nous ayons la même structure HTML que la méthode précédente - un parent, un élément enfant - Gardez toutefois à l'esprit que les transformations CSS3 ne fonctionneront pas dans Internet Explorer 8 et inférieur. Vous voudrez peut-être utiliser l'une des autres méthodes ici comme solution de secours. Nous pouvons aussi utiliser Cette astuce convient lorsque vous ne définissez pas le conteneur dans une largeur fixe, définissez simplement la largeur sur Si vous ne disposez que d’une seule ligne de contenu textuel dans un conteneur, vous pouvez aligner le texte verticalement à l’aide des touches Rappelez-vous que cette astuce ne fonctionne qu'avec une seule ligne de texte. Si le contenu se divise en deux ou plusieurs lignes, l’espace entre chaque ligne sera celui que nous avons spécifié dans Personnellement, utiliser CSS Table est mon astuce préférée pour appliquer un alignement vertical. Cela fonctionne dans les anciens navigateurs comme Internet Explorer 8. Cette méthode est effectuée en définissant l'affichage de l'élément conteneur sur La dernière méthode de centrage vertical consiste à utiliser Flexbox. Flexbox est un nouveau module en CSS3. Il offre une méthode plus simple pour aligner le contenu. Pour centrer le contenu verticalement dans une boîte souple, ajoutez simplement N'oubliez pas que certains navigateurs Flexbox ne prennent en charge que les fonctionnalités partielles du module Flexbox, telles qu'Internet Explorer 10, Safari 6 et Chrome 27 et inférieur. Par conséquent, semblable au tour avec CSS3 Transform, assurez-vous que l’effet tombe bien dans ces navigateurs.position propriété. Vous avez deux absolu. Cela nous permet de le placer librement sur le conteneur. absolu la position affectera l'autre élément dans le même conteneur.2. Utiliser CSS3 Transform
position propriété, n'affectera pas la position d'autres éléments dans le même conteneur.50% de haut en utilisant la transformation CSS donne une traduction de -50%. Et voila.3. Utiliser un rembourrage
rembourrage pour créer une illusion d'alignement vertical. Pour ce faire, il vous suffit de définir le rembourrage supérieur et inférieur de la même manière, comme suit:auto.4. Utilisez la hauteur de ligne
hauteur de la ligne propriété. Met le hauteur de la ligne valeur pour environ la même chose que la hauteur du conteneur, et vous verrez la sortie suivante.hauteur de la ligne, nous donnant trop d'espace.5. Utiliser la table CSS
table, tandis que l'élément enfant doit être affiché comme cellule de table puis utilisez le alignement vertical propriété pour centrer le texte verticalement.6. Utilisez Flexbox
align-items: centre; comme suit, et c'est tout.
