En CSS, certaines choses apparemment simples ne sont pas si faciles à faire. L'une de ces choses est l'alignement, c'est-à-dire lorsqu'un élément doit être positionné d'une certaine manière par rapport à un autre.

Cet article présente quelques solutions toutes faites qui permettront de simplifier le travail de centrage des éléments horizontalement et/ou verticalement.

Remarque : sous chaque solution se trouve une liste de navigateurs indiquant les versions dans lesquelles le code CSS spécifié fonctionne.

CSS - Bloc d'alignement central

1. Aligner un bloc au centre d’un autre. Dans ce cas, les premier et deuxième blocs ont des tailles dynamiques.

... ...

Parent ( position : relative ; ) .child ( position : absolue ; gauche : 50 % ; haut : 50 % ; -webkit-transform : traduire (-50 %, -50 %) ; -moz-transform : traduire (-50 % , -50 % ); -ms-transform : traduire (-50 %, -50 %) ; -o-transform : traduire (-50 %, -50 %) ; transformer : traduire (-50 %, -50 %) ; )

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opéra 10.5+
• Safari3.1+

2. Aligner un bloc au centre d'un autre. Dans ce cas, le deuxième bloc a des dimensions fixes.

Parent ( position : relative ; ) .child ( position : absolue ; gauche : 50 % ; haut : 50 % ; /* largeur et hauteur de 2 blocs */ largeur : 500px ; hauteur : 250px ; /* Les valeurs sont déterminées en fonction sur sa taille */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; )

Navigateurs prenant en charge cette solution :

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opéra 7.0+
• Safari 1.0+

3. Aligner un bloc au centre d'un autre. Dans ce cas, le deuxième bloc a des dimensions spécifiées en pourcentages.

Parent ( position : relative ; ) .child ( position : absolue ; /* largeur et hauteur de 2 blocs en % */ hauteur : 50% ; largeur : 50% ; /* Les valeurs sont déterminées en fonction de sa taille en % * / gauche : 25 % ; /* (100 % - largeur) / 2 */ haut : 25 % ; /* (100 % - hauteur) / 2 */ )

Navigateurs prenant en charge cette solution :

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opéra 7.0+
• Safari 1.0+

CSS - Alignement horizontal

1. Alignement d'un élément de bloc (affichage : bloc) par rapport à un autre (dans lequel il se trouve) horizontalement :

... ...

Bloquer ( marge gauche : auto ; marge droite : auto ; )

Navigateurs prenant en charge cette solution :

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opéra 3.5+
• Safari 1.0+

2. Alignement horizontal d'un élément de ligne (affichage : inline) ou de bloc de ligne (affichage : inline-block) :

... ...

Parent ( text-align: center; ) .child ( display: inline-block; )

Navigateurs prenant en charge cette solution :

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opéra 7.0+
• Safari 1.0+

CSS - Alignement vertical

1. Centrez un élément (affichage : inline, affichage : inline-block) par rapport à l'autre (dans lequel il se trouve) au centre. Le bloc parent dans cet exemple a une hauteur fixe, définie à l'aide de la propriété CSS line-height.

... ...

Parent ( hauteur de ligne : 500 px ; ) .child ( affichage : bloc en ligne ; alignement vertical : milieu ; )

Navigateurs prenant en charge cette solution :

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opéra 7.0+
• Safari 1.0+

2. Centrer verticalement un bloc par rapport à un autre en représentant le parent comme un tableau, et l'enfant comme une cellule de ce tableau.

Parent ( affichage : tableau ; ) .child ( affichage : cellule de tableau ; alignement vertical : milieu ; )

Navigateurs prenant en charge cette solution :

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opéra 7.5+
• Safari 1.0+

Si vous connaissez d'autres astuces intéressantes ou des solutions d'alignement prêtes à l'emploi utiles, partagez-les dans les commentaires.

Très souvent, dans la mise en page, il est nécessaire de centrer certains éléments horizontalement et/ou verticalement. J'ai donc décidé de faire un article avec différentes manières de centrer, afin que tout soit à portée de main au même endroit.

Marge d'alignement horizontal : auto

L'alignement horizontal utilisant la marge est utilisé lorsque la largeur de l'élément centré est connue. Fonctionne pour les éléments de bloc :

Elem ( marge gauche : auto ; marge droite : auto ; largeur : 50 % ; )

Spécifier auto pour les marges droite et gauche les rend égales, ce qui centre l'élément horizontalement dans le bloc parent.

alignement du texte : centre

Cette méthode convient pour centrer du texte dans un bloc. aligner le texte : centrer :

Alignement avec text-align .wrapper ( text-align: center; )

Je suis aligné au centre

position et marge négative à gauche

Convient pour centrer des blocs de largeur connue. On donne au bloc parent position : relative à la position par rapport à lui, la position de l'élément centré : absolue , gauche : 50% et une marge-gauche négative dont la valeur est égale à la moitié de la largeur de l'élément :

Alignement avec la position .wrapper ( position : relative ; ) .wrapper p ( gauche : 50 % ; marge : 0 0 0 -100px ; position : absolue ; largeur : 200px ; )

Je suis aligné au centre

affichage : bloc en ligne + alignement du texte : centre

La méthode convient pour aligner des blocs de largeur inconnue, mais nécessite un parent wrapper. Par exemple, vous pouvez centrer un menu horizontal de cette façon :

Alignement avec l'affichage : inline-block + text-align : center ; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

• maison
• A propos de l'auteur

Hauteur de ligne d'alignement vertical

Pour aligner une ligne de texte, vous pouvez utiliser les mêmes valeurs de hauteur et d'espacement des lignes pour le bloc parent. Convient aux boutons, éléments de menu, etc.

hauteur de ligne .wrapper ( hauteur : 100px ; hauteur de ligne : 100px ; )

je suis aligné verticalement

position et marge négative en hausse

Un élément peut être aligné verticalement en lui donnant une hauteur fixe et en appliquant une position : absolue et une marge négative égale à la moitié de la hauteur de l'élément à aligner. Le bloc parent doit recevoir la position : relative :

Wrapper ( position : relative ; ) elem ( hauteur : 200 px ; marge : -100 px 0 0 ; position : absolue ; haut : 50 % ; )

De cette façon, grâce au positionnement et aux marges négatives, vous pouvez centrer un élément sur la page.

affichage : tableau-cellule

Pour l'alignement vertical, la propriété display: table-cell est appliquée à l'élément, ce qui l'oblige à émuler une cellule de tableau. Nous définissons également sa hauteur et vertical-align: middle . Enveloppons tout cela dans un conteneur avec la propriété dislpay: table;. :

Affichage d'alignement vertical : tableau-cellule .wrapper ( affichage : tableau ; largeur : 100 % ; ) .cell ( affichage : tableau-cellule ; hauteur : 100 px ; alignement vertical : milieu ; )

je suis aligné verticalement

Alignement dynamique d'un élément sur une page

Nous avons étudié les moyens d'aligner les éléments sur une page à l'aide de CSS. Jetons maintenant un œil à l'implémentation de jQuery.

Connectons jQuery à la page :

Je suggère d'écrire une fonction simple pour centrer un élément sur la page, appelons-la alignCenter() . L'élément lui-même agit comme un argument de la fonction :

Fonction alignCenter(elem) ( // code ici )

Dans le corps de la fonction, nous calculons dynamiquement et attribuons les coordonnées du centre de la page aux propriétés CSS left et top :

Fonction alignCenter(elem) ( elem.css(( gauche : ($(window).width() - elem.width()) / 2 + "px", haut : ($(window).height() - elem. height()) / 2 + "px" // n'oubliez pas d'ajouter position: Absolute à l'élément pour déclencher les coordonnées )) )

Dans la première ligne de la fonction, nous obtenons la largeur du document et soustrayons la largeur de l'élément, divisée en deux - ce sera le centre horizontal de la page. La deuxième ligne fait la même chose, uniquement avec la hauteur pour l'alignement vertical.

La fonction est prête, il ne reste plus qu'à l'attacher aux événements de préparation du DOM et de redimensionnement de la fenêtre :

$(function() ( // appelle la fonction de centrage lorsque le DOM est prêt alignCenter($(elem)); // appelle la fonction lors du redimensionnement de la fenêtre $(window).resize(function() ( alignCenter($(elem )); )) // fonction de centrage d'élément function alignCenter(elem) ( elem.css(( // calcul des coordonnées gauche et supérieure gauche : ($(window).width() - elem.width()) / 2 + " px", en haut : ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Application de Flexbox

Les nouvelles fonctionnalités CSS3, comme Flexbox, deviennent progressivement monnaie courante. La technologie permet de créer un balisage sans utiliser de flotteurs, de positionnement, etc. Il peut également être utilisé pour centrer des éléments. Par exemple, appliquez Flexbox à l'élément parent.wrapper et centrez le contenu à l'intérieur :

Wrapper ( affichage : -webkit-box ; affichage : -moz-box ; affichage : -ms-flexbox ; affichage : -webkit-flex ; affichage : flex ; hauteur : 500px ; largeur : 500px ; ) .wrapper .content ( marge : auto; /* marge : 0 auto ; horizontale uniquement */ /* marge : auto 0 ; verticale uniquement */ ) Lorem ipsum dolor sit amet

Cette règle centre l'élément horizontalement et verticalement en même temps - la marge fonctionne désormais non seulement pour l'alignement horizontal, mais aussi pour l'alignement vertical. Et sans largeur/hauteur connue.

Ressources associées Aidez le projet

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 y ajouter des bordures à l'aide de la propriété "padding".

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 ; ) Aligner les blocs positionnés de manière absolue

Si un bloc est défini sur « position : absolue », alors il peut être positionné par rapport à son parent le plus proche avec « position : relative ». Pour ce faire, vous devez attribuer la même valeur à toutes les propriétés (« top », « right », « bottom », « left ») du bloc interne, ainsi qu'à « 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 ; right : 0 ; margin : auto ; background : url(king.png) ; ) Alignement horizontal Alignement à l'aide de "text-align: center"

Pour aligner le texte dans un bloc, il existe une propriété spéciale "text-align". Lorsqu'elle est définie 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 ; ) Alignement blocs utilisant 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 ». Habituellement, la notation abrégée est utilisée : "margin: 0 auto" (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 la propriété "line-height" et en la réglant à la hauteur souhaitée. Par mesure de sécurité, vous devez également définir « hauteur », dont la valeur sera égale à la valeur de « hauteur de ligne », 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 ; alignement du texte : centre ; )

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

La propriété « vertical-align » 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 des tableaux est considérée comme archaïque de nos jours, mais dans des cas exceptionnels, vous pouvez la simuler en spécifiant « display: table-cell ».

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 minimale : 140 px ; affichage : bloc ; marge : 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 "vertical-align: middle". Cela alignera tous les éléments avec « display: inline » qui se trouvent sur la même ligne par rapport à 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 ( display : inline-block ; hauteur : 100% ; vertical-align : middle ; ) Affichage : flexion 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 placerons 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 trente%.

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 :gauche; largeur:30%; hauteur:300px; text-align:center; couleur:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:30% ; hauteur : 300 px ; texte-align : centre ; ) #footer ( arrière-plan : #3e4982 ; clair : les deux ; largeur : 100 % ; hauteur : 50 px ; texte-align : centre ; couleur : #FFFFFF ; taille de police : 14 px ; padding-top:10px; )

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 :200px ; hauteur :300px ; alignement du texte :centre ; couleur :#FFFFFF ; taille de police :18px ; padding-top :10px ; ) #content( arrière-plan :#ffffff ; marge-gauche:200px; hauteur:300px; texte-align:centre; ) #pied de page( 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( background:#6173cb; float:left; largeur:200px; hauteur:300px; text-align:center; couleur:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; largeur : 800 px ; hauteur : 50 px ; alignement du texte : centre ; couleur : #FFFFFF ; taille de police : 14 px ; padding-top : 10px ; )

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

Nous avons examiné deux options pour centrer les pages du site, en fait, ce n'est 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 !

L'alignement des éléments horizontalement et verticalement peut être effectué de différentes manières. Le choix de la méthode dépend du type d'élément (bloc ou inline), du type de son positionnement, de sa taille, etc.

1. Alignement horizontal au centre du bloc/page 1.1. Si le bloc a une largeur : div ( width : 300px ; margin : 0 auto ; /*centre l'élément horizontalement dans le bloc parent*/ )

Si vous souhaitez aligner un élément en ligne de cette façon, il doit être défini sur display: block;

1.2. Si un bloc est imbriqué dans un autre bloc et n'a pas de largeur spécifiée : .wrapper (text-align: center;) 1.3. Si la largeur du bloc est définie et que vous devez la fixer au centre du bloc parent : .wrapper (position : relative ; /* définir le positionnement relatif du bloc parent afin que nous puissions ensuite positionner absolument le bloc à l'intérieur de celui-ci * /) .box ( largeur : 400px ; position : absolue ; gauche : 50% ; marge-gauche : -200px ; /*décale le bloc vers la gauche d'une distance égale à la moitié de sa largeur*/ ) 1.4. Si les blocs n'ont pas de largeur spécifiée, vous pouvez les centrer à l'aide d'un bloc wrapper parent : .wrapper (text-align: center; /*center the content of the block*/) .box ( display: inline-block; / *disposer les blocs dans une rangée horizontalement*/ margin-right: -0.25em; /*supprimer la marge droite entre les blocs*/ ) 2. Alignement vertical 2.1. Si le texte occupe une ligne, par exemple pour les boutons et les éléments de menu : .button ( hauteur : 50px ; hauteur de ligne : 50px ; ) 2.2. Pour aligner un bloc verticalement à l'intérieur d'un bloc parent : .wrapper (position : relative ;) .box ( hauteur : 100px ; position : absolue ; haut : 50% ; marge : -50px 0 0 0 ; ) 2.3. Alignement vertical par type de tableau : .wrapper ( affichage : tableau ; largeur : 100 % ; ) .box ( affichage : cellule de tableau ; hauteur : 100 px ; alignement du texte : centre ; alignement vertical : milieu ; ) 2.4. Si une boîte a une largeur et une hauteur et doit être centrée sur sa boîte parent : .wrapper ( position : relative ; ) .box ( hauteur : 100 px ; largeur : 100 px ; position : absolue ; haut : 0 ; droite : 0 ; bas : 0; gauche: 0; margin: auto; overflow: auto; /*pour que le contenu ne s'étale pas*/ ) 2.5. Positionnement absolu au centre de la page/bloc grâce à la transformation CSS3 :

si des dimensions sont spécifiées pour l'élément

div ( width: 300px; /*définir la largeur du bloc*/ height:100px; /*définir la hauteur du bloc*/ transform: translation(-50%, -50%); position: absolue; top: 50 %; gauche: 50% ; )

si l'élément n'a pas de dimensions et n'est pas vide

Du texte ici h1 ( marge : 0 ; transformation : traduire (-50 %, -50 %); position : absolue ; haut : 50 % ; gauche : 50 % ; )