Alignez DIV au centre. Méthodes d'alignement central vertical en CSS

De l'auteur : Je vous souhaite à nouveau la bienvenue sur les pages de notre blog. Dans l'article d'aujourd'hui, j'aimerais parler de diverses techniques d'alignement qui peuvent être appliquées à la fois aux blocs et à leur contenu. En particulier, comment aligner les blocs en CSS, ainsi que l'alignement du texte.

Aligner les blocs au centre

En CSS, centrer un bloc est simple. C'est la technique la plus connue de beaucoup, mais j'aimerais d'abord en parler tout de suite. Cela signifie un alignement centré horizontalement par rapport à l'élément parent. Comment ça se fait ? Disons que nous avons un conteneur et que notre sujet expérimental se trouve dedans :

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Supposons qu'il s'agisse de l'en-tête du site. Il ne s'étend pas sur toute la largeur de la fenêtre et il faut le centrer. Nous écrivons ainsi :

#en-tête( largeur / max - largeur : 800px ; marge : 0 automatique ;

Nous devons spécifier la largeur exacte ou maximale, puis noter la propriété clé - margin: 0 auto. Il définit les marges extérieures de notre en-tête, la première valeur détermine les marges supérieure et inférieure et la seconde détermine les marges droite et gauche. La valeur auto indique au navigateur de calculer automatiquement le remplissage des deux côtés afin que l'élément soit exactement centré sur son parent. Confortable!

Alignement du texte

C'est aussi une technique très simple. Pour aligner tous les éléments en ligne, vous pouvez utiliser la propriété text-align et ses valeurs : gauche, droite, centre. Ce dernier centre le texte, ce dont nous avons besoin. Vous pouvez même aligner une image de la même manière, car il s'agit également d'un élément en ligne par défaut.

Aligner le texte verticalement

Mais c'est plus compliqué. Par défaut, il n’existe pas de propriété simple et bien connue permettant de centrer facilement le texte verticalement dans un conteneur de blocs. Cependant, les concepteurs de mises en page ont mis au point plusieurs techniques au fil des ans.

Définissez la hauteur du bloc à l’aide du remplissage. Le moyen n'est pas de définir une hauteur explicite en utilisant height, mais de la créer artificiellement en utilisant des remplissages en haut et en bas, qui devraient être les mêmes. Créons n'importe quel bloc et écrivons-y les propriétés suivantes :

div(arrière-plan : #ccc ; remplissage : 30px 0 ; )

div( arrière-plan : #ccc; remplissage : 30px 0 ;

L'arrière-plan sert simplement à montrer visuellement les bords ainsi que le remplissage. Maintenant, la hauteur du bloc est composée de ces deux retraits et de la ligne elle-même, et tout ressemble à ceci :

Définissez la hauteur de ligne du bloc. Je pense que c'est une manière plus correcte si vous devez aligner une ligne de texte. Avec lui, vous pouvez écrire la hauteur normalement, en utilisant la propriété height. Après cela, il doit également définir la hauteur de la ligne, la même que la hauteur du bloc dans son ensemble.

div( hauteur : 60px ; hauteur de ligne : 60px; )

div( hauteur : 60px ; hauteur de ligne : 60 px ;

Le résultat sera similaire à l'image ci-dessus. Tout fonctionnera même si vous ajoutez du rembourrage. Mais seulement pour une seule ligne. Si vous avez besoin de plus de texte dans l'élément, cette méthode ne fonctionnera pas.

Convertissez un bloc en cellule de tableau. L'essence de cette méthode est que la cellule du tableau a la propriété vertical-align: middle, qui centre l'élément verticalement. Par conséquent, dans ce cas, le bloc doit être défini comme suit :

div (affichage : cellule de tableau ; alignement vertical : milieu ; )

div( affichage : tableau - cellule ; vertical - aligner : milieu ;

Cette méthode est intéressante car vous pouvez aligner autant de texte que vous le souhaitez au centre. Mais il vaut mieux écrire display: table dans le bloc dans lequel notre div est imbriqué, sinon cela risque de ne pas fonctionner.

Eh bien, nous arrivons ici à la dernière technique d'aujourd'hui : il s'agit de l'alignement vertical des blocs eux-mêmes. Il faut dire que, encore une fois, il n’existe aucun bien qui serait spécifiquement destiné à cela, mais il existe quelques astuces que vous devriez connaître.

Définissez les retraits en pourcentage. Si vous connaissez la hauteur d'un élément parent et placez un autre élément de bloc à l'intérieur, vous pouvez le centrer à l'aide d'un remplissage en pourcentage. Par exemple, le parent a une hauteur de 600 pixels. Vous y placez un bloc de 300 pixels de haut. De combien faut-il reculer en haut et en bas pour le centrer ? 150 pixels chacun, soit 25 % de la taille du parent.

Cette méthode permet l'alignement uniquement lorsque les dimensions permettent les calculs. Et si votre parent mesure 887 pixels de haut, alors vous ne pourrez rien enregistrer avec précision, c'est déjà clair.

Insère un élément dans une cellule du tableau. Encore une fois, si nous transformons l’élément parent en cellule de tableau, alors le bloc qui y est inséré sera automatiquement centré verticalement. Pour ce faire, il suffit au parent de définir vertical-align: middle.

Et si, en plus de cela, on écrit aussi margin: 0 auto, alors l'élément deviendra centré horizontalement !

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 entendu, 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 !

La mise en page et l'alignement central des pages d'un site Web sont un effort créatif et posent souvent des difficultés aux débutants. Voyons donc comment procéder. Disons que nous voulons créer une page avec la structure suivante :

Notre page se compose de quatre blocs : en-tête, menu, contenu et pied de page. Pour centrer la page, nous allons regrouper ces quatre blocs en un seul bloc principal :

En-tête du site

Contenu

En bas du site

En utilisant cette structure comme exemple, nous envisagerons plusieurs options.

Aménagement et centrage d'un chantier d'hévéa

Lors de l'aménagement d'un site de caoutchouc, la principale unité de mesure utilisée est -%, car le site doit s'étendre sur toute la largeur et occuper tout l'espace libre.

Par conséquent, la largeur des blocs « en-tête » et « pied de page » sera de 100 % de la largeur de l’écran. Laissez la largeur du bloc "menu" être de 30 % et le bloc "contenu" doit être situé à côté du bloc "menu", c'est-à-dire il doit avoir une marge gauche (margin-left) d'une largeur égale à la largeur du bloc "menu", c'est-à-dire 30%.

Pour que les blocs "menu" et "contenu" soient placés l'un à côté de l'autre, faisons flotter le bloc "menu" et poussons-le vers le bord gauche. Nous définirons également les couleurs d’arrière-plan de nos blocs. Écrivons maintenant tout cela dans la feuille de style (sur la page style.css)

#header( arrière-plan :#3e4982 ; largeur :100 % ; hauteur :110 px ; alignement du texte :centre ; couleur :#FFFFFF ; taille de police :24 px ; padding-top :40px ; ) #menu( arrière-plan :#6173cb ; float :left; width:300px; text-align:center; font-size:18px; #content(background:#ffffff; margin-left:30% ; height:300px; text-align:center; ) #footer(arrière-plan : # 3e4982 ; clair : les deux ; largeur : 100 % ; hauteur : 50 px ; texte-align : centre ; couleur : #FFFFFF ;

La hauteur des blocs a été fixée de manière conditionnelle pour que le résultat soit visible. Regardez notre page dans votre navigateur :

Si vous modifiez la taille de la fenêtre du navigateur, la largeur de tous les blocs changera. Ce n'est pas toujours pratique, car... Lorsque le bloc de menu est étiré, un espace vide apparaît. Par conséquent, la largeur du bloc « menu » est souvent fixe, alors faisons de même. Pour cela, remplacez les valeurs des propriétés correspondantes dans la feuille de style :

... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...

Désormais, notre page s'étire plus naturellement. Avec une mise en page fluide, les pages occupent toute la largeur de l’écran, l’alignement des pages n’est donc pas nécessaire.

Mais si vous le souhaitez, vous pouvez faire en sorte que votre page ait un remplissage égal à gauche et à droite de l'écran. Pour ce faire, vous devez ajouter un style au bloc « principal », qui est un conteneur pour tous les autres blocs :

Maintenant, notre page ressemble à ceci :

Aménagement et centrage du site, largeur fixe

Dans ce cas, nous devrons définir des tailles fixes pour nos blocs :

#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( arrière-plan : #6173cb ; float : gauche ; largeur : 200 px ; hauteur : 300 px ; texte-align : centre ; couleur : #FFFFFF ; taille de police : 18px ; padding-top : 10px ; ) #content( background :#ffffff ; marge-gauche:200px; hauteur:300px; texte-align:centre; ) #footer( arrière-plan:#3e4982; clair:les deux; largeur:800px; hauteur:50px; texte-align:centre; couleur:#FFFFFF; police- taille : 14 px ; rembourrage supérieur : 10 px)

Maintenant, notre page est pressée contre le bord gauche de l'écran.

Dans ce cas, l'alignement central des pages du site peut être effectué comme suit. Rappelons que notre page possède une balise "body", à laquelle on peut également attribuer une largeur et un certain remplissage.

Faisons ceci : donnez à la balise "body" une largeur de 800 pixels (comme le bloc "main") et un padding-left de 50%. Ensuite, tout le contenu du bloc "principal" sera affiché sur le côté droit de l'écran (c'est-à-dire du milieu vers la droite) :

Pour que notre bloc « principal » soit situé au milieu de l'écran, son milieu doit coïncider avec le milieu de la balise « body ». Ceux. vous devez décaler le bloc "principal" vers la gauche de la moitié de sa taille. La largeur du bloc "principal" est de 800 pixels, ce qui signifie que vous devez lui définir la propriété "margin-left:-400px". Oui, cette propriété peut prendre des valeurs négatives, alors la marge gauche est réduite (c'est-à-dire décalée vers la gauche). Et c'est exactement ce dont nous avons besoin.

La feuille de style ressemble désormais à ceci :

body( largeur:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; largeur:800px; hauteur:150px; text-align:center ; couleur:#FFFFFF; taille de police:24px; padding-top:40px; ) #menu( arrière-plan:#6173cb; float:gauche; largeur:300px; texte-align:center; couleur:#FFFFFF; taille de police: 18px; padding-top: 10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; largeur : 800 px ; alignement du texte : centre ; taille de police : 14 px ;

Et notre page dans le navigateur se situe exactement au milieu :

Nous avons examiné deux options pour centrer les pages du site ; en fait, elles ne constituent pas un dogme. Vous pouvez expérimenter et créer votre propre version, vérifiez simplement son fonctionnement dans différents navigateurs. Malheureusement, ce qui s'affiche bien dans FireFox ou Opera peut s'afficher de manière totalement incompréhensible dans IE et vice versa. Et nous devons nous en souvenir.

Bonne chance à vous dans votre quête créative !

Aujourd'hui, cher lecteur, nous allons traiter du problème de l'alignement vertical dans un bloc div.

Très probablement, vous connaissez déjà l'existence d'une merveilleuse propriété CSS aligner verticalement. Et Dieu lui-même nous a ordonné d'utiliser précisément cette propriété pour l'alignement vertical (ce n'est pas pour rien qu'elle porte un nom si explicite).

Énoncé du problème : Vous devez centrer le contenu d'un bloc de hauteur variable par rapport à la verticale.

Commençons maintenant à résoudre le problème.

Et donc, nous avons un bloc, sa hauteur peut changer :

La première chose qui me vient à l’esprit est de faire la feinte suivante :

Il y a toutes les raisons de croire que l'expression Bloquer le contenu sera aligné sur la hauteur centrale du conteneur div.

Mais ce n’était pas le cas ! Nous n’obtiendrons ainsi aucun alignement central attendu. Pourquoi? Il semblerait que tout soit indiqué correctement. Il s’avère que c’est là le problème : la propriété aligner verticalement ne peut être utilisé que pour aligner le contenu des cellules d’un tableau ou pour aligner les éléments en ligne les uns par rapport aux autres.

Concernant l'alignement à l'intérieur d'une cellule de tableau, je pense que tout est clair. Mais je vais expliquer un autre cas avec des éléments en ligne.

Alignement vertical des éléments en ligne

Supposons que vous ayez une ligne de texte divisée par des balises de ligne en parties :

Toi accueille morceau texte!

Une balise en ligne est un conteneur dont l'apparence n'entraîne pas le renvoi du contenu sur une nouvelle ligne.

L'action de la balise block entraîne le retour du contenu du conteneur sur une nouvelle ligne.

est une balise de bloc. Si nous enfermons des morceaux de texte dans des blocs

, alors chacun d'eux sera sur une nouvelle ligne. Utilisation de la balise , qui, contrairement à

, est en minuscule, les conteneurs ne seront pas déplacés vers une nouvelle ligne, tous les conteneurs restera sur une seule ligne.

Récipient pratique à utiliser pour spécifier une partie du texte avec une mise en forme spéciale (la mettre en évidence avec une couleur, une police différente, etc.)

Pour les conteneurs Appliquez les propriétés CSS suivantes :

#perviy( alignement vertical :sub; ) #vtoroy( alignement vertical :3px; ) #tretiy( alignement vertical :-3px; )

La ligne de texte résultante ressemblera à ceci :

Ce n'est rien de plus qu'un alignement vertical des éléments en ligne et la propriété CSS aligner verticalement s'acquitte parfaitement de cette tâche.

Nous avons été un peu distraits, revenons maintenant à notre tâche principale.

Alignement vertical dans le conteneur div

Quoi qu'il en soit, pour l'alignement dans le conteneur div, nous utiliserons la propriété aligner verticalement. Comme je l'ai déjà dit, cette propriété peut être utilisée dans le cas de l'alignement d'éléments en ligne (nous avons évoqué ce cas en détail ci-dessus et il ne nous convient pas pour un alignement dans un conteneur div) ; il ne reste plus qu'à utiliser le fait que aligner verticalement fonctionne pour les cellules du tableau.

Comment pouvons-nous utiliser cela ? Nous n'avons pas de table, nous travaillons avec un conteneur div.

Ha, cela s'avère très simple.

Propriété CSS afficher vous permet de transformer notre bloc div en cellule de tableau, cela peut se faire facilement et naturellement :

Disons que nous avons une classe div aligner le texte :

Pour ce bloc, nous spécifions la propriété CSS suivante :

Textalign( display: table-cell; )

Cette instruction CSS transformera miraculeusement notre div en cellule de tableau sans la modifier visuellement d'aucune façon. Et pour une cellule de tableau on peut appliquer la propriété aligner verticalement complètement et l’alignement vertical souhaité fonctionnera.

Cependant, tout ne peut pas se terminer aussi simplement. Nous avons un merveilleux navigateur IE. Il ne sait pas comment gérer la propriété affichage : tableau-cellule(Je vous propose de lire le tableau illustrant les fonctionnalités de cette propriété CSS dans différents navigateurs sur le site htmlbook.ru). Par conséquent, nous devrons recourir à diverses astuces.

Il existe de nombreuses façons d'obtenir un alignement dans un conteneur div pour tous les navigateurs :

• Méthode utilisant un conteneur div auxiliaire supplémentaire
• Méthode utilisant l'expression. Cela est lié à un calcul délicat des hauteurs de blocs. Vous ne pouvez pas faire cela sans connaissance de JavaScript.
• Utilisation de la propriété line-height. Cette méthode ne convient que pour l'alignement vertical dans un bloc de hauteur connue, et n'est donc pas applicable dans le cas général.
• Utilisation du décalage de contenu absolu et relatif dans le cas du navigateur IE. Cette méthode me semble la plus compréhensible et la plus simple. De plus, il est implémentable pour un conteneur div à hauteur variable. Nous y reviendrons plus en détail.

Comme vous l'avez compris, il suffit de résoudre le problème de l'alignement vertical dans IE, associé à sa mauvaise compréhension de la propriété affichage : tableau-cellule(ni IE6, ni IE7, ni IE8 ne connaissant pas cette propriété). Par conséquent, en utilisant commentaire conditionnel Nous préciserons d'autres propriétés CSS spécifiquement pour les navigateurs de la famille IE.

Commentaire conditionnel

Type de construction :

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

s'appelle un commentaire conditionnel (attention, le type de commentaire conditionnel doit correspondre entièrement à l'exemple donné, à un espace près).

Les instructions contenues dans un tel commentaire conditionnel ne seront exécutées que si le navigateur interprétant ce code appartient à la famille IE.

Ainsi, à l’aide d’un commentaire conditionnel, on peut masquer un morceau de code à tous les navigateurs sauf IE.

Solution du problème

A cause de tout ce persil, nous devrons doter notre code HTML de deux conteneurs supplémentaires. Voici à quoi ressemblera notre bloc de texte :

Pour la classe de conteneur div aligner le texte Les propriétés CSS sont définies pour aligner son contenu verticalement pour tous les navigateurs normaux (sauf IE, bien sûr) :

Affichage : cellule de tableau ; alignement vertical : milieu ;

Et deux autres propriétés qui définissent la largeur et la hauteur du bloc :

Largeur : 500 px ; hauteur : 500 px ;

C'est largement suffisant pour aligner le contenu du conteneur centré par rapport à la verticale, dans tous les navigateurs sauf IE.

Nous commençons maintenant à ajouter des propriétés liées à l'alignement pour les navigateurs de la famille IE(c'est pour eux que nous avons utilisé des blocs supplémentaires div Et portée):

Se référant à l'étiquette divà l'intérieur d'un bloc de classe aligner le texte. Pour ce faire, il faut d'abord indiquer le nom de la classe, puis, séparé par un espace, la balise à laquelle on accède.

Textalign div (position : absolue ; haut : 50 % ; )

Cette conception signifie : pour toutes les balises div à l’intérieur d’un bloc avec une classe aligner le texte appliquer les propriétés répertoriées.

En conséquence, les styles spécifiés pour le bloc aligner le texte sont modifiés :

Textalign (affichage : cellule de tableau ; alignement vertical : milieu ; largeur : 500 px ; hauteur : 500 px ; position : relative ; )

Le point supérieur gauche du bloc de texte est désormais abaissé de 50 %.

Pour expliquer ce qui se passe, j'ai dessiné une illustration :

Comme vous pouvez le voir sur la photo, nous avons fait des progrès. Mais ce n'est pas tout ! Le point supérieur gauche du bloc jaune s'est en effet déplacé de 50 % vers le bas par rapport au bloc parent (violet). Mais nous avons besoin qu'il soit à cinquante pour cent de la hauteur du bloc violet. centre du bloc jaune, pas son point supérieur gauche.

Maintenant, le tag entrera en jeu portée et son positionnement relatif :

Textalign span (position : relative ; haut : -50 % ; )

Ainsi, nous avons décalé le bloc jaune de 50 % de sa hauteur par rapport à sa position initiale. Comme vous l’avez compris, la hauteur du bloc jaune est égale à la hauteur du contenu centré. Et la dernière opération sur le conteneur span a placé notre contenu au milieu du bloc violet. Hourra!

Jouons un peu des tours

Tout d'abord, nous devons masquer le persil de tous les navigateurs normaux et l'ouvrir pour IE. Cela peut bien sûr se faire en utilisant un commentaire conditionnel ; ce n'est pas pour rien que nous en avons pris connaissance :

Il y a un petit problème. Si le contenu centré est trop haut, cela entraîne des conséquences désagréables : il y a une hauteur supplémentaire pour le défilement vertical.

Solution: besoin d'ajouter une propriété débordement : caché bloc aligner le texte.

Apprenez à connaître la propriété en détail débordement possible en .

Les instructions CSS finales pour le bloc aligner le texte a la forme :

Textalign (affichage : cellule de tableau ; alignement vertical : milieu ; largeur : 500 px ; hauteur : 500 px ; position : relative ; débordement : caché ; bordure : 1 px noir uni ; )

Je suis désolé, j'ai oublié de mentionner un point important. Si tu essayes définir la hauteur du bloc de classe aligner le texte en pourcentage, alors tu as rien ne fonctionnera.

Centrage dans bloc à hauteur variable

Très souvent, il est nécessaire de définir la hauteur d'un bloc de classe aligner le texte pas en pixels, mais en pourcentage de la hauteur du bloc parent, et alignez le contenu du conteneur div au milieu.

Le problème est qu'il est impossible de faire cela pour une cellule de tableau (mais le bloc de classe aligner le texte se transforme exactement en cellule de tableau, grâce à la propriété affichage:table-cellule).

Dans ce cas, vous devez utiliser un bloc externe pour lequel la propriété CSS est spécifiée affichage:table et déjà défini la valeur en pourcentage de la hauteur pour cela. Puis le bloc imbriqué dedans, avec la directive CSS affichage:table-cellule, héritera volontiers de la hauteur du bloc parent.

Afin d'implémenter un bloc à hauteur variable dans notre exemple, nous allons éditer un peu le CSS :

À la classe aligner le texte nous modifierons la valeur de la propriété afficher Avec cellule de table sur tableau et supprimez la directive d'alignement alignement vertical : milieu. Nous pouvons désormais modifier en toute sécurité la valeur de hauteur de 500 pixels à, par exemple, 100 %.

Donc les propriétés CSS du bloc de classe aligner le texte ressemblera à ceci :

Textalign( affichage : tableau ; largeur : 500 px ; hauteur : 100 % ; position : relative ; débordement : caché ; bordure : 1 px noir uni ; )

Il ne reste plus qu'à mettre en œuvre le centrage de contenu. Pour ce faire, un conteneur div imbriqué dans un bloc de classe aligner le texte(c'est le même bloc jaune sur l'image), vous devez définir la propriété CSS affichage:table-cellule, alors il héritera de la hauteur de 100 % du bloc parent aligner le texte(bloc violet). Et rien ne nous empêchera d'aligner le contenu du conteneur div imbriqué au centre avec la propriété alignement vertical : milieu.

Nous obtenons une autre liste supplémentaire de propriétés CSS pour le bloc div imbriqué dans le conteneur aligner le texte.

Textalign div (affichage : cellule de tableau ; alignement vertical : milieu ; )

C'est tout le truc. Si vous le souhaitez, vous pouvez avoir une hauteur variable avec le contenu centré.

Pour plus d'informations sur l'alignement vertical d'un bloc à hauteur variable, voir .

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 divs de 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 apparaît 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 vertical des blocs 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.