Lorsque la mise en page est souvent nécessaire pourcentrer l'alignement de manière CSS: par exemple, centrez le bloc principal. Il existe plusieurs options pour résoudre ce problème, chacune devant ou devant être utilisée par n'importe quel typographe.
Alignement du texte au centre
Часто в декоративных целях требуется задать alignement du texte au centre, CSS dans ce cas peut réduire le temps de mise en page. Auparavant, cela se faisait à l'aide d'attributs HTML, mais maintenant la norme exige que le texte soit aligné à l'aide de feuilles de style. Contrairement aux blocs pour lesquels vous devez modifier les marges extérieures, l'alignement du texte CSS au centre est effectué à l'aide d'une seule ligne:
- alignement du texte: centre;
Cette propriété est héritée et transmise par le parent.à tous les descendants. Elle affecte non seulement le texte, mais aussi d'autres éléments. Pour ce faire, ils doivent être en minuscules (par exemple, span) ou en minuscules (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, de manière plus flexible, réglez l'indentation.
Souvent, sur les pages, l'alignement est attribué à la balise elle-même. Cela rend immédiatement le code invalide car le W3C a rendu l'attribut align obsolète. Son utilisation sur une page n'est pas recommandée.
Alignement du centre
Si vous devez définir l'alignement de la div au centre, CSSpeut offrir un moyen assez pratique: utiliser des retraits de marge externes. L'indentation peut être définie à la fois sur les éléments de bloc et sur le bloc de ligne. La valeur de la propriété doit prendre les valeurs 0 (indentation verticale) et auto (indentation horizontale automatique):
- marge: 0 auto;
Maintenant, cette option est absolument reconnuevalide. L'utilisation de l'indentation vous permet également de définir l'alignement de l'image au centre: la propriété CSS margin vous permet de résoudre de nombreux problèmes liés au positionnement d'un élément sur la page.
Alignement des blocs gauche ou droit
Parfois, l'alignement central d'une manière CSS n'est pasrequis, mais vous devez mettre deux blocs côte à côte: l'un à partir du bord gauche, l'autre à partir de la droite. Pour ce faire, il existe une propriété float qui peut prendre l'une des trois valeurs: gauche, droite ou aucune. Supposons que vous ayez deux blocs qui doivent être placés côte à côte. Ensuite, le code sera comme ceci:
- .left {float: left;}
- .right {float: right}
S'il existe également un troisième bloc, qui doit être situé sous les deux premiers blocs (par exemple, le pied de page), il doit enregistrer la propriété clear:
- .left {float: left;}
- .right {float: right}
- pied de page {clair: les deux}
Le fait est que les blocs avec les classes gauche et droiteabandonner le 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 tombés du flux et interdit de flotter à gauche et à droite. Par conséquent, dans notre exemple, le pied de page se déplacera vers le bas.
Alignement vertical
Il y a des moments où il ne suffit pas de demanderalignement du centre dans les chemins CSS, vous devez également modifier la position verticale du bloc enfant. Tout élément en ligne ou bloc en ligne peut être pressé sur le bord supérieur ou inférieur, situé au milieu de l'élément parent ou à n'importe quel endroit. Le plus souvent, l'alignement du bloc au centre est requis; pour cela, l'attribut d'alignement vertical est utilisé. Supposons qu'il y ait deux blocs, l'un imbriqué dans l'autre. Dans ce cas, le bloc interne est un élément de bloc de ligne (affichage: bloc en ligne). Il est nécessaire d'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};
Ni l'alignement de texte ni l'alignement vertical n'affectent les éléments de bloc.
Problèmes possibles avec des blocs alignés
Parfois, centrer un div de manière CSSpeut causer des problèmes mineurs. Par exemple, lorsque vous utilisez float: disons qu'il y a trois blocs: .first, .second et .third. Les deuxième et troisième blocs sont dans le premier. Un élément avec la classe seconde est aligné à gauche et le dernier bloc est aligné à droite. Après le nivellement, les deux sont tombés hors du flux. Si l'élément parent n'a pas de hauteur (par exemple, 30em), il cessera de s'étirer le long de la hauteur des blocs enfants. Pour éviter cette erreur, utilisez un «espaceur» - un bloc spécial qui voit .second et .third. Code CSS:
- .second {float: left}
- .third {float: right}
- .clearfix {hauteur: 0; clair: les deux;}
Часто используются псевдокласс :après, ce qui vous permet également de retourner les blocs à placer en créant un pseudo-séparateur (dans l'exemple dans la div avec le conteneur de classe se trouve à l'intérieur .first et contient .left et .right):
- .left {float: left}
- .right {float: right}
- .container: after {content: ""; affichage: 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 pour créer des pseudo-échantillons par expérience.
Un autre problème souvent rencontrétypographes, - alignement des éléments de bloc de ligne. Après chacun d'eux, un espace est automatiquement ajouté. La propriété margin, qui est définie sur un retrait négatif, aide à y faire face. Il existe d'autres moyens qui sont utilisés beaucoup moins fréquemment: par exemple, la réinitialisation de la taille de la police. Dans ce cas, font-size: 0 est spécifié dans les propriétés de l'élément parent. Si le texte se trouve à l'intérieur des blocs, la taille de police souhaitée est déjà renvoyée dans les propriétés des éléments de bloc en ligne. Par exemple, taille de police: 1em. La méthode n'est pas toujours pratique, par conséquent, l'option avec des retraits externes est beaucoup plus souvent utilisée.
L'alignement des blocs vous permet de créer de belles pages fonctionnelles: c'est la mise en page de la mise en page générale, la localisation des marchandises dans les boutiques en ligne, et les photographies sur un site de carte de visite.
