Alignement central: disposition CSS
Lorsque vous créez une page, vous devez souventalignement central de manière CSS: par exemple, centrez l'unité principale. Il y a plusieurs manières de résoudre ce problème, qui doit être utilisé tôt ou tard par n'importe quel concepteur.
Aligner le texte au centre
Souvent à des fins décoratives, vous devez préciserl'alignement du texte au centre, CSS dans ce cas, vous permet de réduire le temps de mise en page. Auparavant, cela se faisait à l'aide d'attributs HTML, mais maintenant, la norme nécessite d'aligner le texte à l'aide de feuilles de style. Contrairement aux blocs pour lesquels vous souhaitez modifier les indentations externes, en CSS, le texte est centré sur le centre en utilisant une ligne:
- text-align: center;
Cette propriété est héritée et transmise du parenttous les descendants. Affecte non seulement le texte, mais aussi d'autres éléments. Pour ce faire, ils doivent être en minuscules (par exemple, span) ou en blocs de lignes (tous les blocs sur lesquels 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, il est plus souple d'ajuster les retraits.
Souvent, les pages alignées sont attribuées à la balise elle-même. Cela rend immédiatement le code invalide, car le W3C a reconnu l'attribut align comme obsolète. L’utiliser sur la page n’est pas recommandé.
Aligner le bloc au centre
Si vous devez définir l’alignement central du div, CSSpeut offrir un moyen assez pratique: l'utilisation de la marge de marge externe. Les retraits peuvent être assignés aux deux éléments de bloc et aux blocs par ligne. La valeur de la propriété doit être 0 (verticale) et auto (indentation horizontale):
- marge: 0 auto;
Maintenant cette option est reconnue absolumentvalide L'utilisation d'indentation externe vous permet également de définir l'alignement de l'image au centre: la marge de propriété CSS permet de résoudre de nombreux problèmes liés au positionnement d'un élément sur la page.
Aligner le bloc à gauche ou à droite
Parfois, le centrage de manière CSS n'est pasIl est nécessaire, mais il est nécessaire de placer deux blocs à proximité: un du bord gauche, un autre - du côté droit. Pour cela, 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. Le code sera alors:
- .left {float: left;}
- .right {float: right}
S'il existe également un troisième bloc, qui devrait se trouver sous les deux premiers blocs (par exemple, pied de page), il doit alors définir la propriété clear:
- .left {float: left;}
- .right {float: right}
- footer {clear: both}
La question est que les blocs avec les classes gauche et droitetomber du flux général, c'est-à-dire que tous les autres éléments ignorent l'existence même des éléments alignés. Le clair: les deux propriétés permettent à un pied de page ou à tout autre bloc de voir les éléments tombés du flux et empêchent le flottement de gauche et de 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 demanderl'alignement au centre par les méthodes CSS, il est également nécessaire de changer la position verticale du bloc enfant. N'importe quelle ligne ou élément de bloc de ligne peut être appuyé sur le bord supérieur ou inférieur, pour être au milieu de l'élément parent ou pour se trouver à un endroit quelconque. Le plus souvent, vous devez aligner le bloc au centre, en utilisant l'attribut vertical-align. Supposons qu'il y a deux blocs, l'un est imbriqué dans l'autre. Le bloc interne est un élément de bloc de ligne (display: inline-block). Vous devez aligner le bloc enfant verticalement:
- alignement sur la bordure supérieure - .child {vertical-align: top};
- alignement central - .child {vertical-align: middle};
- alignement sur la bordure inférieure - .child {vertical-align: bottom};
Les éléments de bloc n'alignent pas la fonction text-align ni la fonction d'alignement vertical.
Problèmes possibles avec les blocs alignés
Aligner parfois le div autour du centre de la méthode CSSpeut causer de petits problèmes. Par exemple, lorsque vous utilisez float: par exemple, il existe trois blocs: .first, .second et .third. Les deuxième et troisième blocs se trouvent dans le premier. Un élément avec la classe second est justifié à gauche et le dernier bloc est aligné à droite. Après égalisation, les deux ont quitté le flux. Si le parent n'a pas de hauteur (par exemple, 30em), il ne s'étirera plus le long de la hauteur des blocs enfants. Pour éviter cette erreur, utilisez le "spacer" - un bloc spécial qui voit .second et .third. Code CSS:
- .second {float: left}
- .third {float: right}
- .clearfix {height: 0; clair: les deux;}
La pseudo-classe est souvent utilisée:after, qui permet aussi de renvoyer des blocs à l'endroit en créant une pseudo-distribution (dans l'exemple de la div avec le conteneur de classe se trouve à l'intérieur de .first et contient .left et .right):
- .left {float: left}
- .right {float: right}
- .container: après {content: ""; display: table; clair: 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 une pseudo-diffusion en expérimentant.
Un autre problème qui est souvent, - alignement des éléments de bloc de ligne. Après chacun d'eux, un espace est automatiquement ajouté. La propriété de marge, qui est spécifiée par une indentation négative, permet de faire face à cela. Il existe d'autres moyens, beaucoup moins utilisés: par exemple, réinitialiser la taille de la police. Dans ce cas, la taille de police: 0 est définie 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 renvoyée dans les propriétés des éléments de bloc de ligne. Par exemple, font-size: 1em. La méthode n'est pas toujours pratique, donc la version avec indentations externes est beaucoup plus utilisée.
L'alignement des blocs vous permet de créer des pages belles et fonctionnelles: il s'agit de la disposition générale de la mise en page et de l'emplacement des marchandises dans les magasins en ligne, ainsi que des photos sur le site de la carte de visite.
