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, il existe une propriété spéciale d'alignement vertical à valeurs multiples dans CSS pour l'alignement vertical. Cependant, dans la pratique, cela ne fonctionne pas du tout comme prévu. Essayons de comprendre cela.
Comparons les approches suivantes. Alignez en utilisant :
- les tables,
- échancrure,
- hauteur de la ligne
- élongation,
- marge négative,
- transformer
- pseudo-élément
- boîte flexible.
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/
Moins évident cette décision– 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.
Externe (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/
Moins cette méthode est que la hauteur du bloc extérieur doit être connue.
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 :
- définir le positionnement relatif par rapport au bloc externe et le positionnement absolu par rapport au bloc interne ;
- 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 ;
- définissez le rembourrage vertical du bloc intérieur sur auto.
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 définir le bloc externe sur un positionnement relatif et le bloc interne sur 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 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 ! C'est beau, 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 plus cas complexes Lorsque la hauteur du bloc est inconnue, vous devez utiliser un pseudo-élément ou la propriété transform.
- Eh bien, si vous avez la chance de ne pas avoir besoin de prendre en charge les anciennes versions du navigateur IE, alors, bien sûr, il est préférable d'utiliser Flexbox.
Balises : ajouter des balises
La 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 :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 : 50px ; 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 ; alignement du texte : centre ; couleur : #FFFFFF ; taille de police : 18 px ; padding-top : 10px ; ) #content( arrière-plan : #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 !
Lors de la mise en page d'une page, il est souvent nécessaire d'aligner Centre CSS-way : par exemple, centrer le bloc principal. Il existe plusieurs options pour résoudre ce problème, dont chacune devra tôt ou tard être utilisée par tout concepteur de mise en page.
Alignement du texte au centre
Souvent, à des fins décoratives, il est nécessaire de centrer le texte ; CSS permet dans ce cas de réduire le temps de mise en page. Auparavant, cela se faisait à l'aide d'attributs HTML, mais désormais, la norme exige que le texte soit aligné à l'aide de feuilles de style. Contrairement aux blocs, pour lesquels il faut modifier les marges, dans Alignement CSS Le centrage du texte se fait à l'aide d'une seule ligne :
- texte-align:centre;
Cette propriété est héritée et transmise du parent à tous les descendants. Affecte non seulement le texte, mais également d'autres éléments. Pour ce faire, ils doivent être en ligne (par exemple, span) ou en ligne-bloc (tous les blocs dont la propriété display: block est définie). Cette dernière option vous permet également de modifier la largeur et la hauteur de l'élément et d'ajuster les retraits de manière plus flexible.
Souvent sur les pages, l'alignement est attribué à la balise elle-même. Cela invalide immédiatement le code, puisque le W3C a déprécié l'attribut align. Son utilisation sur une page n'est pas recommandée.
Aligner un bloc au centre
Si vous avez besoin de centrer un div, CSS peut vous offrir tout à fait moyen pratique: utilisez les marges extérieures. Les retraits peuvent être définis à la fois pour les éléments de bloc et les éléments de bloc en ligne. La valeur de la propriété doit être 0 (remplissage vertical) et auto (remplissage horizontal automatique) :
- marge : 0 automatique ;
Désormais, cette option est reconnue comme absolument valable. Utiliser un remplissage externe permet également de centrer l'image : cela permet de résoudre de nombreux problèmes liés au positionnement d'un élément sur la page.
Aligner un bloc à gauche ou à droite
Parfois, l'alignement central CSS n'est pas requis, mais vous devez placer deux blocs côte à côte : un sur le bord gauche, l'autre à droite. A cet effet, il existe une propriété float, qui peut prendre l'une des trois valeurs suivantes : left, right ou none. Disons que vous avez deux blocs qui doivent être placés côte à côte. Ensuite le code sera comme ceci :
- .left (float:gauche;)
- .right(float:droite)
S'il existe également un troisième bloc, qui doit être situé sous les deux premiers blocs (par exemple, un pied de page), alors il faut lui attribuer la propriété clear :
- .left (float:gauche;)
- .right(float:droite)
- pied de page (effacer : les deux)
Le fait est que les blocs avec les classes gauche et droite sortent du flux général, c'est-à-dire que tous les autres éléments ignorent l'existence même des éléments alignés. La propriété clear:both permet au pied de page ou à tout autre bloc de voir les éléments qui sont tombés hors du flux et interdit le flottement à gauche et à droite. Par conséquent, dans notre exemple, le pied de page descendra.
Alignement vertical
Il y a des moments où il ne suffit pas de définir l'alignement central à l'aide des méthodes CSS ; vous devez également modifier la position verticale du bloc enfant. Tout élément en ligne ou en bloc en ligne peut être imbriqué sur le bord supérieur ou inférieur, au milieu d'un élément parent ou à n'importe quel emplacement. Le plus souvent, le bloc doit être aligné au centre ; pour cela, l'attribut vertical-align est utilisé. Disons qu'il y a deux blocs, l'un imbriqué dans l'autre. Dans ce cas, le bloc interne est un élément inline-block (affichage : inline-block). Vous devez aligner le bloc enfant verticalement :
- alignement supérieur - .child(vertical-align:top);
- alignement central - .child(vertical-align:middle);
- alignement inférieur - .child(vertical-align:bottom);
Sur éléments de bloc ni l'alignement du texte ni l'alignement vertical n'ont d'effet.
Problèmes possibles avec les blocs alignés
Parfois, centrer un div à l'aide de CSS peut causer quelques problèmes. Par exemple, lorsque vous utilisez float : disons qu'il y a trois blocs : .first, .second et .third. Les deuxième et troisième blocs se trouvent dans le premier. L'élément de classe second est aligné à gauche et le dernier bloc est aligné à droite. Après s'être stabilisés, les deux sont tombés hors du courant. Si l'élément parent n'a pas de hauteur définie (par exemple, 30em), alors il ne s'étendra plus jusqu'à la hauteur de ses blocs enfants. Pour éviter cette erreur, utilisez un « espaceur » - un bloc spécial qui voit .second et .third. Code CSS :
- .second(float:gauche)
- .third(float:droite)
- .clearfix(hauteur :0 ; clair : les deux ;)
La pseudo-classe:after est souvent utilisée, qui permet également de remettre les blocs à leur place en créant un pseudo-espaceur (dans l'exemple, un div avec la classe conteneur se trouve à l'intérieur.first et contient.left et.right) :
- .left(float:gauche)
- .right(float:droite)
- .container:after(content:""; display:table; clear:les deux;)
Les options ci-dessus sont les plus courantes, bien qu'il existe plusieurs variantes. Vous pouvez toujours trouver le moyen le plus simple et le plus pratique de créer un pseudo-espaceur grâce à l'expérimentation.
Un autre problème que les concepteurs de mise en page rencontrent souvent est l'alignement des éléments des blocs en ligne. Un espace est automatiquement ajouté après chacun d'eux. La propriété margin, définie sur un retrait négatif, permet de résoudre ce problème. Il existe d'autres méthodes qui sont utilisées beaucoup moins fréquemment : par exemple, la mise à zéro. Dans ce cas, font-size: 0 est écrit dans les propriétés de l'élément parent. S'il y a du texte à l'intérieur des blocs, la taille de police requise est déjà renvoyée dans les propriétés des éléments de bloc en ligne. Par exemple, taille de police : 1em. Cette méthode n'est pas toujours pratique, c'est pourquoi l'option avec retraits externes est beaucoup plus souvent utilisée.
L'alignement des blocs vous permet de créer des pages belles et fonctionnelles : cela inclut la mise en page globale, la disposition des produits dans les boutiques en ligne et les photographies sur un site Web de carte de visite.
Bonjour! Continuons à maîtriser les bases Langage HTML. Voyons ce que vous devez écrire pour aligner le texte sur le centre, la largeur ou les bords.
Passons aux choses sérieuses, voyons comment centrer le texte en trois différentes façons. Les deux derniers sont directement liés à la feuille de style. Il peut s'agir d'un fichier CSS qui connecte les pages du site et définit leur apparence.
Méthode 1 - travail direct avec HTML
C'est en fait assez simple. Voir exemple ci-dessous.
Alignez le paragraphe au centre.
Si vous devez déménager fragments de texte sinon, au lieu du paramètre « center », nous saisissons les valeurs suivantes :
- justifier – aligner le texte sur la largeur de la page ;
- à droite – sur le bord droit ;
- gauche - à gauche.
Par analogie, vous pouvez déplacer le contenu qui se trouve dans les en-têtes (h1, h2) et le conteneur (div).
Méthodes 2 et 3 - utiliser des styles
Le design présenté ci-dessus peut être légèrement transformé. L'effet sera le même. Pour ce faire, vous devez écrire le code ci-dessous.
Bloc de texte.
Sous cette forme, le code est écrit directement dans le HTML pour centrer le contenu du texte.
Il existe une autre manière alternative d’obtenir des résultats. Vous devrez suivre quelques étapes.
Étape 1. Dans le code principal, écrivez
Matériel texte.
Étape 2. Dans le fichier CSS inclus, entrez le code suivant :
Rovno (text-align:center;)
Je remarque que le mot « rovno » n'est que le nom d'une classe qui peut être appelée différemment. Ceci est laissé à la discrétion du programmeur.
Par analogie, en HTML, vous pouvez facilement centrer, justifier et aligner le texte sur le bord droit ou gauche de la page. Comme vous pouvez le constater, il existe bien plus d’une option pour atteindre votre objectif.
Juste quelques questions :
- Réalisez-vous un projet d’information à but non lucratif ?
- Voulez-vous que votre site Web fonctionne bien ? moteurs de recherche?
- Voulez-vous gagner un revenu en ligne?
Si toutes les réponses sont positives, envisagez simplement une approche intégrée du développement de sites Web. Ces informations seront particulièrement utiles s'il travaille pour CMS WordPress.
Je tiens à souligner que vos propres sites Web ne sont qu'une des nombreuses options permettant de générer des revenus passifs ou actifs sur Internet. Mon blog est dédié aux opportunités financières en ligne.
Avez-vous déjà travaillé dans le domaine de l'arbitrage de trafic, de la rédaction et d'autres domaines d'activité qui apportent l'essentiel ou revenu supplémentaire lors d'une collaboration à distance ? Vous pouvez en apprendre davantage à ce sujet et bien plus encore dès maintenant sur les pages de mon blog.
J'en publierai quelques autres à l'avenir informations utiles. Reste en contact. Si vous le souhaitez, vous pouvez vous abonner aux mises à jour Workip par e-mail. Le formulaire d'abonnement se trouve ci-dessous.
L'article d'aujourd'hui vise à vous montrer comment centrer un div, horizontalement et verticalement, à l'aide de quelques astuces CSS. Nous vous expliquerons également comment centrer sur toute la page ou sur un élément div individuel.
Centrez facilement un élément DIV sur la page
Cette méthode fonctionnera parfaitement dans tous les navigateurs.
CSS
Centre-div (marge : 0 auto ; largeur : 100px ; )
Exemple
La valeur auto dans la propriété margin définit les marges gauche et droite sur tout l'espace disponible sur la page. La chose importante à retenir ici est que l’élément div centré doit avoir une valeur de largeur définie.
Centrer un DIV à l'intérieur d'un élément DIV à l'ancienne
Cette méthode div d’alignement central fonctionnera dans tous les navigateurs.
CSS
Outer-div ( remplissage : 30px ; ) .inner-div ( marge : 0 auto ; largeur : 100px ; )
HTML
Exemple
Le div externe peut être placé n'importe où, mais le div interne doit avoir une largeur spécifiée ( largeur).
Centrer un DIV à l'intérieur d'un élément DIV à l'aide d'un bloc en ligne
Dans cette méthode de centrage d’un div dans un div, il n’est pas nécessaire de préciser la largeur de l’élément interne. Cela fonctionnera dans tous navigateurs modernes, y compris IE8.
CSS
Outer-div ( remplissage : 30px ; text-align : center ; ) .inner-div ( display : inline-block ; padding : 50px ; )
HTML
Exemple
La propriété text-align ne fonctionne que sur les éléments en ligne. La valeur inline-block permet au div interne d'être affiché en tant qu'élément en ligne et également en tant que bloc ( bloc en ligne). La propriété text-align sur l’élément div externe nous permettra de centrer le div interne.
Centrer un DIV à l'intérieur d'un élément DIV horizontalement et verticalement
Ici margin: auto est utilisé pour centrer le div au centre de la page. L'exemple fonctionnera dans tous les navigateurs modernes.
CSS
Outer-div ( remplissage : 30px ; ) .inner-div ( marge : auto ; largeur : 100px ; hauteur : 100px ; )
HTML
Exemple
L'élément div interne doit avoir une largeur spécifiée ( largeur) et la hauteur ( hauteur). La méthode ne fonctionnera pas si l’élément div externe a une hauteur fixe.
Centrez le DIV en bas de la page
Ici margin: auto est utilisé pour centrer le div verticalement et le positionnement absolu est utilisé pour l'élément extérieur. La méthode fonctionnera dans tous les navigateurs modernes.
CSS
Outer-div ( position : absolue ; bas : 30px ; largeur : 100 % ; ) .inner-div ( marge : 0 auto ; largeur : 100px ; hauteur : 100px ; couleur d'arrière-plan : #ccc ; )
HTML
Exemple
Le div interne doit avoir une largeur définie. L'espace en bas de la page est ajusté à l'aide de la propriété bottom du div externe. Vous pouvez également centrer un div en haut de la page en remplaçant la propriété du bas par la propriété du haut.
Centrer les DIV sur la page verticalement et horizontalement
Ici, pour centrer le div, nous utilisons à nouveau margin : positionnement automatique et absolu du div externe. La méthode fonctionnera dans tous les navigateurs modernes.
CSS
Centre-div ( position : absolue ; marge : auto ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; largeur : 100 px ; hauteur : 100 px ; )
Exemple
L'élément div doit avoir une largeur définie ( largeur) et la hauteur ( hauteur).
Faire un centrage adaptatif d'un élément DIV sur la page
Ici pour alignement des divs Au centre, en utilisant CSS, nous rendons la largeur de l'élément div adaptative afin qu'il réponde aux changements de taille de la fenêtre. Cette méthode fonctionne dans tous les navigateurs.
CSS
Centre-div (marge : 0 auto ; largeur maximale : 700 px ; )
Exemple
Un élément div centré doit avoir sa propriété max-width définie.
Centrer un DIV à l'intérieur d'un élément en utilisant les propriétés du bloc interne
L'élément div interne ici est réactif. Cette méthode de centrage d'un div à l'intérieur d'un div fonctionnera dans tous les navigateurs.
CSS
Outer-div ( remplissage : 30px ; ) .inner-div ( marge : 0 auto ; largeur maximale : 700px ; )
HTML
Exemple
Le div interne doit avoir sa propriété max-width définie.
Centrer deux divs réactifs l'un à côté de l'autre
Ici, nous avons deux éléments div réactifs côte à côte. Cette méthode consistant à placer un div au centre de l’écran fonctionnera dans tous les navigateurs modernes.
CSS
Conteneur (text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) écran et (largeur maximale : 600 px) ( .left-div, .right-div ( lef max-width : 100 % ; ) )
HTML
Exemple
Ici, nous avons plusieurs éléments avec la propriété inline-block appliquée, situés à l'intérieur d'un conteneur centré. Cet exemple utilise également des requêtes multimédias CSS ; autrement dit, si la taille de l'écran est inférieure à 600 pixels, la propriété max-width pour les div gauche et droite est définie sur 100 %.
Élément DIV centré à l'aide de Flexbox
Ici, nous centrons le div CSS à l'aide de Flexbox. Il est destiné à faciliter le processus de développement de la conception Les interfaces des utilisateurs. Ce module est pris en charge par Chrome 38+, IE11, Microsoft Bord, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ et Navigateur Android 40+ .
CSS
Conteneur ( affichage : flex ; align-items : centre ; justifier-contenu : centre ; hauteur : 100vh ; ) .item ( couleur d'arrière-plan : #f3f2ef ; rayon de bordure : 3 px ; largeur : 200 px ; hauteur : 100 px ; )
