Alignement horizontal et vertical des éléments. Centrer le div et autres subtilités de positionnement

Combien de copies ont déjà été brisées pour la tâche d'aligner les éléments sur une page. J'attire votre attention sur la traduction d'un excellent article avec une solution à ce problème de Stephen Shaw pour Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Nous savions tous marge : 0 automatique ; pour le centrage horizontal, mais marge : auto ; n'a pas fonctionné pour la verticale. Cela peut être facilement résolu en réglant simplement la hauteur et en appliquant les styles suivants :

Centre absolu (marge : auto ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ; )
Je ne suis pas le premier à proposer cette solution, mais cette approche est rarement utilisée pour l'alignement vertical. Dans les commentaires de l'article Comment centrer n'importe quoi avec CSS, Simon renvoie à un exemple jsFiddle qui fournit une excellente solution pour le centrage vertical. En voici quelques autres sur ce sujet.

Regardons de plus près la méthode.

Avantages

• Compatibilité entre navigateurs (y compris IE 8-10)
• Pas de balisage supplémentaire, style minimal
• Adaptabilité
• Indépendance de rembourrage(sans dimensionnement de la boîte!)
• Fonctionne pour les images

Défauts

• La hauteur doit être précisée (voir Hauteur variable)
• Il est recommandé de définir débordement : auto pour que le contenu ne se propage pas
• Ne fonctionne pas sur Windows Phone

Compatibilité du navigateur

La méthode a été testée et fonctionne très bien dans Chrome, Firefox, Safari, Mobile Safari et même IE 8-10. Un utilisateur a mentionné que le contenu n'est pas aligné verticalement sur Windows Phone.

À l'intérieur du conteneur

Contenu placé dans un conteneur avec position : relative s'alignera parfaitement :

Centre absolu (largeur : 50 % ; hauteur : 50 % ; débordement : auto ; marge : auto ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ; )

Utilisation de la fenêtre

Définissons le contenu sur position : fixe et définissons le z-index :

Absolute-Center.is-Fixed (largeur : 50 % ; hauteur : 50 % ; débordement : auto ; marge : auto ; position : fixe ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ; z-index : 999 ;

Adaptabilité

Le principal avantage de la méthode décrite est qu'elle fonctionne parfaitement lorsque la hauteur ou la largeur est spécifiée en pourcentage, et même en comprenant largeur min/largeur max Et hauteur min/hauteur max.

Absolute-Center.is-Responsive (largeur : 60 % ; hauteur : 60 % ; largeur minimale : 400 px ; largeur maximale : 500 px ; remplissage : 40 px ; débordement : auto ; marge : auto ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ;

Compensations

Si le site a un en-tête fixe ou si vous devez faire une autre indentation, il vous suffit d'ajouter un code comme celui-ci aux styles haut : 70 px ; Actuellement défini marge : auto ; le bloc de contenu sera correctement centré en hauteur.

Vous pouvez également aligner le contenu sur le côté souhaité, en laissant le centrage en hauteur. Pour ce faire, vous devez utiliser à droite : 0 ; à gauche : auto ; pour un alignement correct ou gauche : 0 ; à droite : automatique ; pour un alignement à gauche.

Absolute-Center.is-Right (largeur : 50 % ; hauteur : 50 % ; marge : auto ; débordement : auto ; position : absolue ; haut : 0 ; gauche : auto ; bas : 0 ; droite : 20 px ; alignement du texte : droite;

Beaucoup de contenu

Pour garantir qu'une grande quantité de contenu ne permette pas à la mise en page de s'écarter, nous utilisons débordement : auto. Une barre de défilement verticale apparaîtra. Vous pouvez également ajouter hauteur maximale : 100 % ; si le contenu n'a pas de remplissage supplémentaire.
.Absolute-Center.is-Overflow (largeur : 50 % ; hauteur : 300 px ; hauteur maximale : 100 % ; marge : auto ; débordement : auto ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0; )

Images

Cette méthode fonctionne également très bien pour les images ! Ajoutons du style hauteur : automatique ; alors l'image sera mise à l'échelle avec le conteneur.

Absolute-Center.is-Image (largeur : 50 % ; hauteur : auto ; marge : auto ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ; )

Hauteur variable

La méthode décrite nécessite une hauteur de bloc donnée, qui peut être spécifiée sous forme de pourcentage et contrôlée à l'aide de hauteur maximale, ce qui rend la méthode idéale pour les sites Web réactifs. Une façon de ne pas spécifier de hauteur est d'utiliser affichage : tableau. Dans ce cas, le bloc de contenu est centré quelle que soit sa taille.

Il peut y avoir des problèmes de compatibilité entre navigateurs ; vous devriez peut-être utiliser la méthode table-cell (décrite ci-dessous).

• Firefox/IE8 : usage affichage : tableau Aligne le bloc verticalement sur la bordure supérieure du document.
• IE9/10 : usage affichage : tableau Aligne le bloc sur le coin supérieur gauche de la page.
• Safari mobile : si la largeur est définie sur un pourcentage, le centrage horizontal en souffre

.Absolute-Center.is-Variable ( affichage : tableau ; largeur : 50 % ; débordement : auto ; marge : auto ; position : absolue ; haut : 0 ; gauche : 0 ; bas : 0 ; droite : 0 ; )

Autres moyens

La méthode décrite fonctionne très bien dans la plupart des cas, mais il existe d'autres méthodes qui peuvent être applicables pour résoudre des problèmes spécifiques.

Marge négative

Probablement la méthode la plus populaire. Convient si les dimensions du bloc sont connues.

Est-négatif (largeur : 300 px ; hauteur : 200 px ; remplissage : 20 px ; position : absolue ; haut : 50 % ; gauche : 50 % ; marge gauche : -170px ; /* (largeur + remplissage)/2 */ margin- haut : -120px ; /* (hauteur + remplissage)/2 */ )
Avantages :

• Compatibilité entre navigateurs
• Code minimal

Défauts:

• Non adaptatif
• La mise en page glisse s'il y a trop de contenu dans le conteneur
• Vous devez compenser l'empreinte ou l'utilisation dimensionnement de la boîte : border-box

Utiliser la transformation

L'un des moyens les plus simples prend en charge les changements de hauteur. Il existe un article détaillé sur ce sujet - "Centrage des éléments en pourcentage de largeur/hauteur" de CSS-Tricks.

Est-Transformé (largeur : 50 % ; marge : automatique ; position : absolue ; haut : 50 % ; gauche : 50 % ; -webkit-transform : traduire (-50 %, -50 %); -ms-transform : traduire ( -50%,-50%); transformer : traduire(-50%,-50%);
Avantages :

• Hauteur variable
• Code minimal

Défauts:

• Ne fonctionne pas sous IE 8
• Utiliser des préfixes
• Peut interférer avec d'autres effets avec transformer
• Dans certains cas, les bords des blocs et le texte sont flous lors du rendu

Cellule de tableau

Peut-être l’un des moyens les meilleurs et les plus simples. Décrit en détail dans l'article "Centrage vertical en hauteur flexible avec CSS, au-delà d'IE7" de 456bereasttreet. Le principal inconvénient est le balisage supplémentaire : trois éléments sont nécessaires :

CSS :
.Pos-Container.is-Table ( affichage : tableau ; ) .is-Table .Table-Cell ( affichage : tableau-cellule ; alignement vertical : milieu ; ) .is-Table .Center-Block ( largeur : 50 % ; marge : 0 automatique ;
Avantages :

• Hauteur variable
• La mise en page ne fonctionne pas lorsqu'il y a une grande quantité de texte dans un bloc
• Compatibilité entre navigateurs

Défauts:

• Structure complexe

Boîte flexible

L'avenir du CSS, flexbox, résoudra de nombreux problèmes de mise en page actuels. Ceci est écrit en détail dans un article de Smashing Magazine intitulé Centering Elements with Flexbox.

Pos-Container.is-Flexbox ( affichage : -webkit-box ; affichage : -moz-box ; affichage : -ms-flexbox ; affichage : -webkit-flex ; affichage : flex ; -webkit-box-align : centre ; - moz-box-align : centre ; -ms-flex-align : centre ; -webkit-align-items : centre ; -webkit-box-pack : centre ; : centre ; justifier-contenu : centre)
Avantages :

• Le contenu peut avoir n'importe quelle hauteur ou largeur
• Peut être utilisé dans des cas plus complexes

Défauts:

• Pas de support pour IE 8-9
• Nécessite un conteneur ou des styles dans le corps
• Nécessite une grande variété de préfixes pour fonctionner correctement dans les navigateurs modernes
• Problèmes de performances possibles

Conclusion

Chaque méthode présente des avantages et des inconvénients. Essentiellement, le choix se résume à choisir quels navigateurs doivent être pris en charge

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

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 d'une balise block provoque 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 la même 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 spécifierons différentes propriétés CSS spécifiquement pour les navigateurs 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 de cinquante pour cent de la hauteur du bloc violet pour être 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!

Trichons un peu

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 .

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 !

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é dans le 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 enregistrer 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 !