Tout sur l'alignement CSS. Alignement vertical en div. Bonus : commentaires conditionnels

Lors de la mise en page d'une page, il est souvent nécessaire d'effectuer un alignement au centre grâce à la méthode CSS : par exemple, centrer le bloc principal. Il existe plusieurs options pour résoudre ce problème, chacune d'entre elles devant tôt ou tard être utilisée par tout concepteur de mise en page.

Alignement du texte au centre

Souvent, à des fins décoratives, il est nécessaire de définir l'alignement du texte au centre ; CSS permet dans ce cas de réduire le temps de mise en page. Auparavant, cela se faisait à l'aide d'attributs HTML, mais la norme exige désormais l'alignement du texte à l'aide de feuilles de style. Contrairement aux blocs, dont il faut modifier les marges, en CSS, le centrage du texte se fait à l'aide d'une seule ligne :

• texte-align:centre;

Cette propriété est héritée et transmise du parent à tous les descendants. Affecte non seulement le texte, mais également d'autres éléments. Pour ce faire, ils doivent être en ligne (par exemple, span) ou en ligne-bloc (tous les blocs dont la propriété display: block est définie). Cette dernière option vous permet également de modifier la largeur et la hauteur de l'élément et d'ajuster les retraits de manière plus flexible.

Souvent sur les pages, l'alignement est attribué à la balise elle-même. Cela invalide immédiatement le code, puisque le W3C a déprécié l'attribut align. Son utilisation sur une page n'est pas recommandée.

Aligner un bloc au centre

Si vous avez besoin de centrer un div, CSS propose un moyen assez pratique : utiliser les marges. Les retraits peuvent être définis à la fois pour les éléments de bloc et les éléments de bloc en ligne. La valeur de la propriété doit être 0 (remplissage vertical) et auto (remplissage horizontal automatique) :

• marge : 0 automatique ;

Désormais, cette option est reconnue comme absolument valable. Utiliser un remplissage externe permet également de centrer l'image : cela permet de résoudre de nombreux problèmes liés au positionnement d'un élément sur la page.

Aligner un bloc à gauche ou à droite

Parfois, l'alignement central CSS n'est pas requis, mais vous devez placer deux blocs côte à côte : un sur le bord gauche, l'autre à droite. A cet effet, il existe une propriété float, qui peut prendre l'une des trois valeurs suivantes : left, right ou none. Disons que vous avez deux blocs qui doivent être placés côte à côte. Ensuite le code sera comme ceci :

• .left (float:gauche;)
• .right(float:droite)

S'il existe également un troisième bloc, qui doit être situé sous les deux premiers blocs (par exemple, un pied de page), alors il faut lui attribuer la propriété clear :

• .left (float:gauche;)
• .right(float:droite)
• pied de page (effacer : les deux)

Le fait est que les blocs avec les classes gauche et droite sortent du flux général, c'est-à-dire que tous les autres éléments ignorent l'existence même des éléments alignés. La propriété clear:both permet au pied de page ou à tout autre bloc de voir les éléments qui sont tombés hors du flux et interdit le flottement à gauche et à droite. Par conséquent, dans notre exemple, le pied de page descendra.

Alignement vertical

Il y a des moments où il ne suffit pas de définir l'alignement central à l'aide des méthodes CSS ; vous devez également modifier la position verticale du bloc enfant. Tout élément en ligne ou en bloc en ligne peut être imbriqué sur le bord supérieur ou inférieur, au milieu d'un élément parent ou à n'importe quel emplacement. Le plus souvent, le bloc doit être aligné au centre ; pour cela, l'attribut vertical-align est utilisé. Disons qu'il y a deux blocs, l'un imbriqué dans l'autre. Dans ce cas, le bloc interne est un élément inline-block (affichage : inline-block). Vous devez aligner le bloc enfant verticalement :

• alignement supérieur - .child(vertical-align:top);
• alignement central - .child(vertical-align:middle);
• alignement inférieur - .child(vertical-align:bottom);

Ni l'alignement du texte ni l'alignement vertical n'affectent les éléments de bloc.

Problèmes possibles avec les blocs alignés

Parfois, centrer un div à l'aide de CSS peut causer quelques problèmes. Par exemple, lorsque vous utilisez float : disons qu'il y a trois blocs : .first, .second et .third. Les deuxième et troisième blocs se trouvent dans le premier. L'élément de classe second est aligné à gauche et le dernier bloc est aligné à droite. Après s'être stabilisés, les deux sont tombés hors du courant. Si l'élément parent n'a pas de hauteur définie (par exemple, 30em), alors il ne s'étendra plus jusqu'à la hauteur de ses blocs enfants. Pour éviter cette erreur, utilisez un « espaceur » - un bloc spécial qui voit .second et .third. Code CSS :

• .second(float:gauche)
• .third(float:droite)
• .clearfix(hauteur :0 ; clair : les deux ;)

La pseudo-classe:after est souvent utilisée, qui permet également de remettre les blocs à leur place en créant un pseudo-espaceur (dans l'exemple, un div avec la classe conteneur se trouve à l'intérieur.first et contient.left et.right) :

• .left(float:gauche)
• .right(float:droite)
• .container:after(content:""; display:table; clear:les deux;)

Les options ci-dessus sont les plus courantes, bien qu'il existe plusieurs variantes. Vous pouvez toujours trouver le moyen le plus simple et le plus pratique de créer un pseudo-espaceur grâce à l'expérimentation.

Un autre problème que les concepteurs de mise en page rencontrent souvent est l'alignement des éléments des blocs en ligne. Un espace est automatiquement ajouté après chacun d'eux. La propriété margin, définie sur un retrait négatif, permet de résoudre ce problème. Il existe d'autres méthodes qui sont utilisées beaucoup moins fréquemment : par exemple, la mise à zéro. Dans ce cas, font-size: 0 est écrit dans les propriétés de l'élément parent. S'il y a du texte à l'intérieur des blocs, la taille de police requise est déjà renvoyée dans les propriétés des éléments de bloc en ligne. Par exemple, taille de police : 1em. Cette méthode n'est pas toujours pratique, c'est pourquoi l'option avec retraits externes est beaucoup plus souvent utilisée.

L'alignement des blocs vous permet de créer des pages belles et fonctionnelles : cela inclut la mise en page globale, la disposition des produits dans les boutiques en ligne et les photographies sur un site Web de carte de visite.

Chaque maquettiste est constamment confronté à la nécessité d'aligner le contenu dans un bloc : horizontalement ou verticalement. Il existe plusieurs bons articles sur ce sujet, mais ils offrent tous beaucoup d'options intéressantes, mais peu pratiques, c'est pourquoi il faut consacrer plus de temps à souligner les points principaux. J'ai décidé de présenter ces informations sous une forme qui me convient, afin de ne plus chercher sur Google.

Aligner des blocs avec des tailles connues

La façon la plus simple d'utiliser CSS consiste à aligner des blocs dont la hauteur (pour l'alignement vertical) ou la largeur (pour l'alignement horizontal) est connue.

Alignement à l'aide du remplissage

Parfois, vous ne pouvez pas centrer un élément, mais lui ajouter des bordures à l'aide du bouton " rembourrage".

Par exemple, il y a une image de 200 x 200 pixels, et vous devez la centrer dans un bloc de 240 x 300. Nous pouvons définir la hauteur et la largeur du bloc extérieur = 200 pixels, et ajouter 20 pixels en haut et en bas. , et 50 à gauche et à droite.

.example-wrapper1 ( arrière-plan : #535E73 ; largeur : 200px ; hauteur : 200px ; remplissage : 20px 50px ; )

Alignement de blocs positionnés de manière absolue

Si le blocage est défini sur " position : absolue", alors il peut être positionné par rapport à son parent le plus proche avec "position: relative". Cela nécessite toutes les propriétés (" haut","droite","bas","gauche") du bloc interne pour attribuer la même valeur, ainsi que "margin: auto".

*Il y a une nuance : la largeur (hauteur) du bloc intérieur + la valeur de gauche (droite, bas, haut) ne doivent pas dépasser les dimensions du bloc parent. Il est plus sûr d'attribuer 0 (zéro) aux propriétés de gauche (droite, bas, haut).

.example-wrapper2 ( position : relative ; hauteur : 250px ; arrière-plan : url(space.jpg) ; ) .cat-king ( largeur : 200px ; hauteur : 200px ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ; marge : auto ; arrière-plan : url(roi.png) ;

Alignement horizontal

Alignement à l'aide de "text-align: center"

Pour aligner le texte dans un bloc, il existe une propriété spéciale " aligner le texte". Lorsqu'il est réglé sur " centre"Chaque ligne de texte sera alignée horizontalement. Pour le texte multiligne, cette solution est extrêmement rarement utilisée ; le plus souvent, cette option peut être trouvée pour aligner des travées, des liens ou des images.

Une fois, j'ai dû proposer du texte pour montrer comment fonctionne l'alignement du texte à l'aide de CSS, mais rien d'intéressant ne m'est venu à l'esprit. Au début, j'ai décidé de copier une comptine pour enfants quelque part, mais je me suis souvenu que cela pourrait gâcher le caractère unique de l'article et que nos chers lecteurs ne pourraient pas le trouver sur Google. Et puis j'ai décidé d'écrire ce paragraphe - après tout, le point n'est pas là, mais le point est en alignement.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Il convient de noter que cette propriété fonctionnera non seulement pour le texte, mais également pour tous les éléments en ligne (« display : inline »).

Mais ce texte est aligné à gauche, mais il se trouve dans un bloc centré par rapport au wrapper.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; )

Aligner des blocs à l'aide de la marge

Les éléments de bloc avec une largeur connue peuvent facilement être alignés horizontalement en les définissant sur « marge-gauche : auto ; marge-droite : auto ». On utilise généralement l'abréviation : " marge : 0 automatique" (n'importe quelle valeur peut être utilisée à la place de zéro). Mais cette méthode ne convient pas à l'alignement vertical.

.lama-wrapper ( hauteur : 200px ; arrière-plan : #F1BF88 ; ) .lama1 ( hauteur : 200px ; largeur : 200px ; arrière-plan : url(lama.jpg) ; marge : 0 auto ; )

C'est ainsi que vous devez aligner tous les blocs, lorsque cela est possible (lorsqu'un positionnement fixe ou absolu n'est pas requis) - c'est la plus logique et la plus adéquate. Bien que cela semble évident, j’ai parfois vu des exemples effrayants avec des retraits négatifs, j’ai donc décidé de clarifier.

Alignement vertical

L'alignement vertical est beaucoup plus problématique - apparemment, cela n'était pas prévu dans le CSS. Il existe plusieurs façons d'obtenir le résultat souhaité, mais toutes ne sont pas très belles.

Alignement avec la propriété line-height

Dans le cas où il n'y a qu'une seule ligne dans un bloc, vous pouvez réaliser son alignement vertical en utilisant le bouton " hauteur de ligne" et en le réglant à la hauteur souhaitée. Pour plus de fiabilité, il convient de définir également "hauteur", dont la valeur sera égale à la valeur de "ligne-hauteur", car cette dernière n'est pas prise en charge dans tous les navigateurs.

.example-wrapper4 ( hauteur de ligne : 100 px ; couleur : #DC09C0 ; arrière-plan : #E5DAE1 ; hauteur : 100 px ; alignement du texte : centre ; )

Il est également possible de réaliser un alignement de blocs avec plusieurs lignes. Pour ce faire, vous devrez utiliser un bloc wrapper supplémentaire et y définir la hauteur de la ligne. Un bloc interne peut être multiligne, mais doit être "inline". Vous devez lui appliquer "vertical-align: middle".

.example-wrapper5 ( hauteur de ligne : 160px ; hauteur : 160px ; taille de police : 0 ; arrière-plan : #FF9B00 ; ) .example-wrapper5 .text1 ( affichage : bloc en ligne ; taille de police : 14px ; hauteur de ligne : 1.5 ; alignement vertical : milieu ; arrière-plan : #FFFAF2 ; couleur : #FF9B00 ;

Le bloc wrapper doit avoir "font-size: 0" défini. Si vous ne définissez pas la taille de la police sur zéro, le navigateur ajoutera quelques pixels supplémentaires. Vous devrez également spécifier la taille de la police et la hauteur de ligne du bloc interne, car ces propriétés sont héritées du parent.

Alignement vertical dans les tableaux

Propriété " aligner verticalement" affecte également les cellules du tableau. Avec la valeur définie sur "milieu", le contenu à l'intérieur de la cellule est aligné au centre. Bien sûr, la disposition du tableau est considérée comme archaïque de nos jours, mais dans des cas exceptionnels, vous pouvez la simuler en spécifiant " affichage : tableau-cellule".

J'utilise généralement cette option pour l'alignement vertical. Vous trouverez ci-dessous un exemple de mise en page tiré d'un projet terminé. C’est l’image ainsi centrée verticalement qui est intéressante.

.one_product .img_wrapper ( affichage : cellule de tableau ; hauteur : 169px ; alignement vertical : milieu ; débordement : caché ; arrière-plan : #fff ; largeur : 255px ; ) .one_product img ( hauteur max : 169px ; largeur max : 100 % ; largeur min : 140px ; affichage : marge de bloc : 0 auto ;

Il ne faut pas oublier que si un élément a un ensemble "float" autre que "aucun", alors il sera dans tous les cas block (affichage : block) - vous devrez alors utiliser un wrapper de bloc supplémentaire.

Alignement avec un élément en ligne supplémentaire

Et pour les éléments en ligne, vous pouvez utiliser " alignement vertical : milieu". De plus, tous les éléments avec " affichage : en ligne" qui sont sur la même ligne s'aligneront sur une ligne centrale commune.

Vous devez créer un bloc auxiliaire d'une hauteur égale à la hauteur du bloc parent, puis le bloc souhaité sera centré. Pour ce faire, il est pratique d'utiliser les pseudo-éléments :before ou :after.

.example-wrapper6 ( hauteur : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; largeur : 200px ; hauteur : 200px ; .riki ( affichage : bloc en ligne ; hauteur : 100% ; alignement vertical : milieu ; )

Affichage : flexibilité et alignement

Si vous ne vous souciez pas beaucoup des utilisateurs d'Explorer 8, ou si vous vous souciez tellement que vous êtes prêt à insérer un morceau de javascript supplémentaire pour eux, vous pouvez utiliser "display: flex". Les boîtes flexibles sont idéales pour résoudre les problèmes d'alignement et écrivez simplement « margin : auto » pour centrer le contenu à l'intérieur.

Jusqu'à présent, je n'ai pratiquement jamais rencontré cette méthode, mais il n'y a pas de restrictions particulières.

.example-wrapper7 ( affichage : flex ; hauteur : 300px ; arrière-plan : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

Eh bien, c'est tout ce que je voulais écrire sur l'alignement CSS. Désormais, centrer le contenu ne sera plus un problème !

Je pense que beaucoup d'entre vous qui ont dû faire face à la mise en page ont rencontré le besoin d'aligner des éléments verticalement et connaissent les difficultés qui surviennent lors de l'alignement d'un élément au centre.

Oui, pour l'alignement vertical, il existe une propriété spéciale d'alignement vertical en CSS avec plusieurs valeurs. Cependant, dans la pratique, cela ne fonctionne pas du tout comme prévu. Essayons de comprendre cela.

Comparons les approches suivantes. Alignez en utilisant :

• des tableaux,
• échancrure,
• hauteur de ligne
• étirage,
• marge négative,
• transformer
• pseudo-élément
• boîte flexible.

Pour illustrer, considérons l’exemple suivant.

Il existe deux éléments div, l'un d'eux étant imbriqué dans l'autre. Donnons-leur les classes correspondantes - externe et interne.

Le défi consiste à aligner l’élément intérieur avec le centre de l’élément extérieur.

Considérons d'abord le cas où les dimensions des blocs externes et internes connu. Ajoutons la règle display: inline-block à l'élément interne, et text-align: center et vertical-align: middle à l'élément externe.

N'oubliez pas que l'alignement s'applique uniquement aux éléments dotés d'un mode d'affichage en ligne ou en bloc en ligne.

Définissons les tailles des blocs, ainsi que les couleurs d'arrière-plan afin que nous puissions voir leurs bordures.

Extérieur (largeur : 200 px ; hauteur : 200 px ; alignement du texte : centre ; alignement vertical : milieu ; couleur d'arrière-plan : #ffc ; ) .inner (affichage : bloc en ligne ; largeur : 100 px ; hauteur : 100 px ; couleur d'arrière-plan : #fcc )
Après avoir appliqué les styles, nous verrons que le bloc intérieur est aligné horizontalement, mais pas verticalement :
http://jsfiddle.net/c1bgfffq/

Pourquoi est-ce arrivé ? Le fait est que la propriété d'alignement vertical affecte l'alignement l'élément lui-même, pas son contenu(sauf lorsqu'il est appliqué aux cellules d'un tableau). Par conséquent, l’application de cette propriété à l’élément externe n’a rien produit. De plus, appliquer cette propriété à un élément interne ne fera rien non plus, puisque les blocs en ligne sont alignés verticalement par rapport aux blocs adjacents, et dans notre cas, nous avons un bloc en ligne.

Il existe plusieurs techniques pour résoudre ce problème. Ci-dessous, nous examinerons chacun d’eux de plus près.

Alignement à l'aide d'un tableau

La première solution qui vient à l’esprit est de remplacer le bloc extérieur par un tableau d’une seule cellule. Dans ce cas, l'alignement sera appliqué au contenu de la cellule, c'est-à-dire au bloc interne.

http://jsfiddle.net/c1bgfffq/1/

L'inconvénient évident de cette solution est que, d'un point de vue sémantique, il est incorrect d'utiliser des tableaux pour l'alignement. Le deuxième inconvénient est que la création d'un tableau nécessite l'ajout d'un autre élément autour du bloc extérieur.

Le premier inconvénient peut être partiellement supprimé en remplaçant les balises table et td par div et en définissant le mode d'affichage du tableau en CSS.

.outer-wrapper ( affichage : table ; ) .outer ( affichage : table-cell ; )
Cependant, le bloc extérieur restera toujours une table avec toutes les conséquences qui en découlent.

Alignement à l'aide de retraits

Si les hauteurs des blocs intérieurs et extérieurs sont connues, alors l'alignement peut être défini à l'aide des retraits verticaux du bloc intérieur à l'aide de la formule : (H extérieur – H intérieur) / 2.

Extérieur (hauteur : 200 px ; ) .intérieur ( hauteur : 100 px ; marge : 50px 0 ; )
http://jsfiddle.net/c1bgfffq/6/

L’inconvénient de la solution est qu’elle n’est applicable que dans un nombre limité de cas lorsque les hauteurs des deux blocs sont connues.

Alignement à l'aide de la hauteur de ligne

Si vous savez que le bloc interne ne doit pas occuper plus d'une ligne de texte, vous pouvez utiliser la propriété line-height et la définir égale à la hauteur du bloc externe. Étant donné que le contenu du bloc interne ne doit pas être renvoyé à la deuxième ligne, il est recommandé d'ajouter également les espaces blancs : nowrap et overflow : Hidden Rules.

Externe (hauteur : 200 px ; hauteur de ligne : 200 px ; ) .inner ( espace blanc : nowrap ; débordement : caché ; )
http://jsfiddle.net/c1bgfffq/12/

Cette technique peut également être utilisée pour aligner du texte multiligne si vous redéfinissez la valeur de hauteur de ligne pour le bloc interne et ajoutez également l'affichage : inline-block et vertical-align : middle Rules.

Outer ( hauteur : 200 px ; hauteur de ligne : 200 px ; ) .inner ( hauteur de ligne : normale ; affichage : bloc en ligne ; alignement vertical : milieu ; )
http://jsfiddle.net/c1bgfffq/15/

L'inconvénient de cette méthode est qu'il faut connaître la hauteur du bloc extérieur.

Alignement par "étirement"

Cette méthode peut être utilisée lorsque la hauteur du bloc externe est inconnue, mais que la hauteur du bloc interne est connue.

Pour ce faire, vous avez besoin de :

1. définir le positionnement relatif par rapport au bloc externe et le positionnement absolu par rapport au bloc interne ;
2. ajoutez les règles top : 0 et bottom : 0 au bloc intérieur, de sorte qu'il s'étendra sur toute la hauteur du bloc extérieur ;
3. définissez le rembourrage vertical du bloc intérieur sur auto.

.outer ( position : relative ; ) .inner ( hauteur : 100px ; position : absolue ; haut : 0 ; bas : 0 ; marge : auto 0 ; )
http://jsfiddle.net/c1bgfffq/4/

L'idée derrière cette technique est que la définition d'une hauteur pour un bloc étiré et positionné de manière absolue amène le navigateur à calculer le remplissage vertical dans un rapport égal s'il est défini sur auto .

Alignement avec marge négative en haut

Cette méthode est devenue largement connue et est très souvent utilisée. Comme le précédent, il est utilisé lorsque la hauteur du bloc extérieur est inconnue, mais que la hauteur du bloc intérieur est connue.

Vous devez donner au bloc externe un positionnement relatif et au bloc interne un positionnement absolu. Ensuite, vous devez déplacer le bloc intérieur vers le bas de la moitié de la hauteur du haut du bloc extérieur : 50 % et le relever de la moitié de sa propre hauteur margin-top : -H intérieur / 2.

Externe ( position : relative ; ) .inner ( hauteur : 100 px ; position : absolue ; haut : 50 % ; marge supérieure : -50px ; )
http://jsfiddle.net/c1bgfffq/13/

L'inconvénient de cette méthode est qu'il faut connaître la hauteur de l'unité intérieure.

Alignement avec la transformation

Cette méthode est similaire à la précédente, mais elle peut être utilisée lorsque la hauteur de l'unité intérieure est inconnue. Dans ce cas, au lieu de définir un remplissage de pixels négatif, vous pouvez utiliser la propriété transform et déplacer le bloc interne vers le haut à l'aide de la fonction translationY et d'une valeur de -50% .

Externe ( position : relative ; ) .inner ( position : absolue ; haut : 50 % ; transformation : traduireY (-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Pourquoi était-il impossible de définir la valeur en pourcentage dans la méthode précédente ? Étant donné que les valeurs de marge en pourcentage sont calculées par rapport à l'élément parent, une valeur de 50 % équivaudrait à la moitié de la hauteur de la boîte extérieure et nous aurions besoin d'élever la boîte intérieure à la moitié de sa propre hauteur. La propriété transform est parfaite pour cela.

L'inconvénient de cette méthode est qu'elle ne peut pas être utilisée si l'unité intérieure a un positionnement absolu.

Alignement avec Flexbox

La méthode d'alignement vertical la plus moderne consiste à utiliser la disposition de boîte flexible (populairement connue sous le nom de Flexbox). Ce module vous permet de contrôler de manière flexible le positionnement des éléments sur la page, en les disposant presque n'importe où. L'alignement central pour Flexbox est une tâche très simple.

Le bloc externe doit être défini sur display: flex et le bloc interne sur margin: auto . Et c'est tout ! Magnifique, n'est-ce pas ?

Externe (affichage : flex ; largeur : 200 px ; hauteur : 200 px ; ) .inner ( largeur : 100 px ; marge : auto ; )
http://jsfiddle.net/c1bgfffq/14/

L'inconvénient de cette méthode est que Flexbox n'est pris en charge que par les navigateurs modernes.

Quelle méthode dois-je choisir ?

Vous devez partir de l'énoncé du problème :

• Pour aligner verticalement du texte, il est préférable d'utiliser des retraits verticaux ou la propriété line-height.
• Pour les éléments positionnés de manière absolue et dont la hauteur est connue (par exemple, les icônes), la méthode avec une propriété margin-top négative est idéale.
• Pour les cas plus complexes, où la hauteur du bloc est inconnue, vous devez utiliser un pseudo-élément ou la propriété transform.
• Eh bien, si vous avez la chance de ne pas avoir besoin de prendre en charge les anciennes versions du navigateur IE, alors, bien sûr, il est préférable d'utiliser Flexbox.

Balises : Ajouter des balises

La propriété CSS vertical-align est responsable de l'alignement vertical du texte et des images sur la page. La caractéristique importante est qu’il ne fonctionne qu’avec les éléments de table, les éléments en ligne et les blocs en ligne. Pris en charge par tous les navigateurs modernes.

Syntaxe CSS alignement vertical

... vertical-align : valeur ; ...

• baseline - alignement sur la ligne de base de l'ancêtre (ou simplement sur la limite inférieure du parent)
• bottom - aligner sur le bas de la ligne (ou sur l'élément qui se trouve en dessous de tout)
• middle - aligner le milieu de l'élément sur la ligne de base du parent plus la moitié de la hauteur du parent
• sub - l'affichage se produit sous la ligne (ressemble à un indice)
• super - l'affichage se produit au-dessus de la ligne (en exposant)
• text-bottom - aligner la bordure inférieure de l'élément sur le bord inférieur de la ligne
• text-top - aligne la bordure supérieure de l'élément sur le bord supérieur de la ligne
• top - aligner le bord supérieur de l'élément avec le haut de l'élément le plus haut de la ligne
• hériter - hérite de la valeur du parent
• valeur - indiquée en pixels. Un nombre positif se déplace vers le haut par rapport à la ligne de base. Négatif vers le bas
• intérêts - indiqués en pourcentages. Un nombre positif se déplace vers le haut par rapport à la ligne de base. Négatif vers le bas

Valeur d'alignement vertical par défaut :

• ligne de base (pour les éléments en ligne)
• milieu (pour les cellules du tableau)

Alignement vertical dans les tableaux

L'utilisation la plus courante de l'alignement vertical concerne les cellules de tableau. Dans la balise

utilisez l'attribut valign.

Syntaxe CSS valign pour les tableaux

Où la valeur peut prendre les valeurs suivantes :

• baseline - alignement sur la ligne de base de la première ligne de texte
• bottom - aligner sur le bord inférieur de la cellule du tableau
• milieu - alignement au milieu de la cellule
• top - aligner sur le bord supérieur de la cellule

Par exemple:

(!LANG : ou

Aligner en haut

Alignement central

Alignement inférieur

Aligner en haut

Alignement central

Alignement inférieur

Exemples avec des alignements verticaux

Exemple 1. Valeurs d'alignement vertical : ligne de base, bas, haut, sous

Texte aligné vert_align_baseline
Texte aligné vert_align_bottom
Texte aligné vert_align_top
Texte avec alignement vert_align_sub

Exemple 2 : valeurs à alignement vertical : valeurs absolues et pourcentages

Vous trouverez ci-dessous des exemples d'alignement vertical avec valeur absolue et pourcentages.

Convertit ce qui suit sur la page :

Chaîne source. Texte aligné 10 pixels vers le haut
Chaîne source. Texte aligné 5 pixels vers le bas
Chaîne source. Texte aligné à 50 % vers le haut
Chaîne source. Texte aligné à 30 % vers le bas

Note

La valeur vertical-align: middle n'aligne pas l'élément en ligne au centre du plus grand élément de la ligne (comme on pourrait s'y attendre). Au lieu de cela, la valeur médiane aligne l’élément par rapport à un « X » minuscule hypothétique (également appelé hauteur x).

Pour accéder à l'alignement vertical depuis JavaScript, vous devez écrire la construction suivante :

object.style.verticalAlign ="VALEUR "(!LANG :

Aligner le texte verticalement en CSS- un travail très difficile. J'ai vu suffisamment de personnes aux prises avec cela pour que je continue à trouver des erreurs « critiques » en matière de conception réactive.

Mais n’ayez crainte : si vous avez déjà des difficultés avec l’alignement vertical CSS, vous êtes au bon endroit.

Parlons de la propriété CSS d'alignement vertical

Lorsque j’ai commencé à travailler dans le développement Web, j’ai eu un peu de mal avec cette propriété. Je pensais que ça devrait fonctionner comme une propriété classique" aligner le texte" Oh, si seulement tout était si simple...

propriété CSS d'alignement vertical fonctionne très bien avec les tables, mais pas avec les divs ou d'autres éléments. Lorsque vous l'utilisez sur un div, il aligne l'élément par rapport aux autres div, mais pas son contenu. Dans ce cas, la propriété ne fonctionne qu'avec display: inline-block; .

Voir exemple

Nous voulons centrer le contenu, pas le div lui-même !

Vous avez deux options. Si vous n'avez que des éléments div avec du texte, vous pouvez utiliser la propriété line-height. Cela signifie que vous devez connaître la hauteur de l'élément, mais vous ne pouvez pas la définir. De cette façon, votre texte sera toujours au centre.

La vérité sur cette approche Alignement vertical CSS il y a un inconvénient. Si le texte est multiligne, la hauteur de la ligne sera multipliée par le nombre de lignes. Très probablement, dans ce cas, vous vous retrouverez avec une page terriblement présentée.

Jetez un oeil à cet exemple

Si le contenu que vous souhaitez centrer comprend plusieurs lignes, il est préférable d’utiliser des tableaux div. Vous pouvez également utiliser des tableaux, mais ce n'est pas sémantiquement correct. Si vous avez besoin de pauses à des fins réactives, il est préférable d'utiliser des éléments div.

Pour que cela fonctionne, il doit y avoir un conteneur parent avec display: table et à l'intérieur le nombre souhaité de colonnes que vous souhaitez centrer à l'aide de display: table-cell et vertical-align: middle .

Voir exemple

Pourquoi cela fonctionne-t-il avec le balisage de table mais pas avec les éléments div ? Parce que les lignes du tableau ont la même hauteur. Lorsque le contenu d'une cellule de tableau n'utilise pas tout l'espace de hauteur disponible, le navigateur ajoute automatiquement un remplissage vertical pour centrer le contenu.

propriété de position

Commençons par les bases de l'alignement vertical des div CSS :

• position : statique est la valeur par défaut. L'élément est rendu selon l'ordre HTML ;
• position : absolue - utilisée pour déterminer la position exacte d'un élément. Cette position est toujours liée à l'élément parent positionné relativement le plus proche (et non statique). Si vous ne déterminez pas la position exacte d'un élément, vous en perdrez le contrôle. Il apparaîtra de manière aléatoire, ignorant complètement le flux du document. Par défaut, l'élément est affiché dans le coin supérieur gauche ;
• position : relatif - utilisé pour positionner un élément par rapport à sa position normale (statique). Cette valeur préserve l'ordre du flux des documents ;
• position : fixe - utilisé pour positionner l'élément par rapport à la fenêtre du navigateur afin qu'il soit toujours visible dans la fenêtre.

Remarque : certaines propriétés ( top et z-index) ne fonctionne que si l'élément est défini sur position (et non statique).

Passons aux choses sérieuses !

Voulez-vous mettre en œuvre Alignement central vertical CSS? Créez d’abord un élément avec une position et des dimensions relatives. Par exemple : 100 % en largeur et en hauteur.

La deuxième étape peut varier en fonction des navigateurs cibles, mais vous pouvez utiliser l'une des deux options suivantes :

• Propriété ancienne : nécessité de connaître la dimension exacte de la fenêtre pour supprimer la moitié de la largeur et la moitié de la hauteur. Voir exemple;
• Nouvelle propriété CSS3: Vous pouvez ajouter une propriété de transformation avec une valeur de translation de 50 % et le bloc sera toujours au centre. Voir l'exemple.

En gros, si vous souhaitez centrer le contenu, ne jamais utiliser le top : 40% ou à gauche : 300px . Cela fonctionne bien sur les écrans de test, mais ce n'est pas centré.

Rappelez-vous la position : fixe ? Vous pouvez faire la même chose avec qu'avec une position absolue, mais vous n'avez pas besoin d'une position relative pour l'élément parent - il sera toujours positionné par rapport à la fenêtre du navigateur.

Avez-vous entendu parler de la spécification flexbox ?

Vous pouvez utiliser flexbox. C'est bien mieux que toute autre option centrer l'alignement du texte CSS verticalement. Avec flexbox, gérer les éléments est comme un jeu d'enfant. Le problème est que certains navigateurs doivent être supprimés, comme IE9 et les versions inférieures. Voici un exemple de la façon de centrer verticalement un bloc :

Voir l'exemple

En utilisant une disposition flexbox, vous pouvez centrer plusieurs blocs.

Si vous appliquez ce que vous apprenez de ces exemples, vous pouvez maîtriser Alignement des blocs verticaux CSS dès que possible.

Liens et lectures complémentaires

Apprendre le balisage CSS

FlexBox Grenouille

Bac à sable Flexbox

Traduction de l’article « Alignement vertical CSS pour tout le monde (mannequins inclus)» a été préparé par l’équipe sympathique du projet.