Centré: CSS-layout

Lorsque la mise en page de la page est souvent nécessaire de faire une CSS façon centrée: par exemple, au centre de l'unité principale. Il existe plusieurs solutions à ce problème, dont chacun aura tôt ou tard, d'utiliser un codeur.

Aligner le texte au centre

Souvent, à des fins décoratives que vous souhaitez définir le texte centré, CSS dans ce cas, pour réduire le temps d'imposition. Auparavant, cela a été fait en utilisant HTML attributs, mais maintenant la norme nécessaire pour aligner le texte sur la feuille de style. Contrairement au bloc pour lequel vous voulez changer le rembourrage externe dans l'alignement CSS du texte au milieu est fait avec une seule ligne:

• text-align: center;

Cette propriété est héritée et transmise des parents à tous les enfants. Elle affecte non seulement le texte, mais aussi à d'autres éléments. A cet effet, ils doivent être en minuscules (par exemple, la durée) ou une ligne-bloc (tous les blocs qui spécifient la propriété d'affichage: bloc). Cette dernière option vous permet également de modifier la largeur et la hauteur de l'élément, la configuration plus souple de l'empreinte.

pages alignent souvent attribut à lui-même l'étiquette. Cela rend immédiatement le code non valide, car W3C a reconnu align attribut obsolète. L'utilisation sur une page n'est pas recommandée.

centré bloc

Si vous souhaitez définir l'alignement du div au milieu, CSS peut offrir une manière assez confortable: l'utilisation de la marge de rembourrage externe. Rembourrage peut être spécifié que les éléments de bloc et de ligne-bloc. La valeur de Svoysva doit être 0 (remplissage vertical) et automatique (indentation automatique horizontalement):

• margin: 0 auto;

Maintenant, cette option est reconnue comme tout à fait valable. En utilisant un rembourrage externe vous permet également de définir l'alignement du centre: la propriété CSS marge permet de résoudre de nombreux problèmes liés à l'élément de positionnement sur la page.

L'alignement du bord gauche ou à droite du bloc

Parfois, CSS sens ne nécessite pas d'alignement du centre, mais il est nécessaire de mettre les deux blocs, l'un du côté gauche et l'autre – de la droite. Pour cela, il est la propriété du flotteur, ce qui peut prendre une des trois valeurs: à gauche, à droite ou pas. Disons que vous avez deux blocs qui doivent être placés côte à côte. Ensuite, le code est le suivant:

• .left {float: left;}
• .RIGHT {float: right}

S'il y a un troisième bloc, qui doit être situé sous les deux premiers blocs (par exemple, pied de page), il est nécessaire d'enregistrer fonction claire:

• .left {float: left;}
• .RIGHT {float: right}
• Pied de page {clear: both}

Le fait que les blocs avec les classes de chute gauche et à droite sur le flux total, qui est, tous les autres éléments ont ignoré l'existence même des éléments alignés. Propriété claire: les deux permet bloc de pied de page ou tout autre visible précipité des cellules d'écoulement et prohibe enveloppe (float) à la fois gauche et à droite. Par conséquent, dans notre exemple, le pied de page est déplacé vers le bas.

alignement vertical

Il y a des cas où ne suffit pas pour définir l'alignement du centre des moyens CSS, vous devez également modifier la position verticale du bloc de l'enfant. Tout élément de ligne ou de la ligne-bloc peut être pressé contre le bord supérieur ou inférieur, situé au milieu de l'élément parent ou être dans un emplacement arbitraire. Le plus souvent, exigent un alignement du centre du bloc, il utilise l'attribut vertical-align. Supposons qu'il y ait deux blocs, l'un nichés dans l'autre. Dans cette unité intérieure – élément rangée-bloc (display: inline-block). Il est nécessaire d'aligner l'enfant bloc vertical:

• alignement de la limite supérieure – .child {vertical-align: top};
• centrée – .child {-align vertical: milieu};
• l'alignement du bord inférieur – .child {vertical-align: bottom};

A éléments de bloc audio text-align ou vertical-align ne sont pas applicables.

problèmes avec d'autres unités alignées

Parfois div align le centre de la CSS façon peut causer un peu de mal. Par exemple, lors de l'utilisation d'un flotteur: par exemple, il y a trois blocs: .first, .SECOND et .third. Les deuxième et troisième blocs sont situés dans le premier. Un élément avec une classe deuxième gauche-aligné, et le dernier bloc – sur la droite. Après avoir aligné les deux rayé du cours d'eau. Si la hauteur élément parent n'est pas défini (par exemple, 30em), elle cessera d'étirer la hauteur des unités subsidiaires. Pour éviter cette erreur, utilisez la « entretoise » – une unité spéciale, qui voit .SECOND et .third. CSS code:

• .SECOND {float: left}
• .third {float: right}
• .clearfix {height: 0; clear: both;}

pseudo souvent utilisée: après, ce qui permet aussi de restituer les blocs en place par la création d'psevdorasporki (dans l'exemple de la div avec la classe se situe à l'intérieur du récipient et comprend une .left .first et .right):

• .left {float: left}
• .RIGHT {float: right}
• .container: after {content: ''; display: table; clear: both;}

Les options ci-dessus – le plus commun, bien qu'il existe quelques variations. Vous pouvez toujours trouver le moyen le plus simple et le plus pratique de créer psevdorasporki par des expériences.

Un autre problème fréquemment rencontré mise en page – alignement des éléments ligne bloc. Après chacun d'eux un espace est automatiquement ajouté. Manipulez elle aide la propriété de marge, qui est définie par l'empreinte négative. Il existe d' autres moyens, qui sont moins fréquemment utilisés, par exemple, remis à zéro la taille de la police. Dans ce cas, les propriétés de l'élément parent registres font-size: 0. Si elle est située dans des blocs de texte, les propriétés des éléments ligne bloc sont retournés à la taille de la police désirée. Par exemple, la taille de la police: 1em. La méthode est pas toujours pratique, il est donc beaucoup plus couramment utilisée version avec des marges externes.

L'alignement des blocs vous permet de créer de belles pages et fonctionnelles: la présentation générale et mise en page, et l'emplacement des marchandises dans les magasins, et les photos sur le site d'un petit.