Centre Alignement: CSS-layout

ajustement sur la page est souvent nécessaire de faire l'alignement de centre-CSS façon: par exemple, pour centrer l'unité principale.Il existe plusieurs solutions à ce problème, dont chacun sera tôt ou tard d'utiliser tout codeur.

aligner le texte centré

souvent à des fins décoratives que vous souhaitez définir l'alignement du texte du centre, CSS dans ce cas, de réduire le temps de l'imposition.Auparavant, cela a été fait en utilisant HTML attributs, maintenant la norme exige l'alignement du texte en utilisant les feuilles de style.Contrairement au bloc pour lequel vous voulez changer les marges extérieures, avec l'alignement du texte de CSS dans le 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.Pour ce faire, ils doivent être en minuscules (par exemple, durée) ou ligne-bloc (les blocs qui définit la propriété display: block).Cette dernière option vous permet également de modifier la largeur et la hauteur de la configuration plus souple de l'indentation.

Souvent les pages aligner attribut à la balise elle-même.Cela rend immédiatement le code invalide W3C reconnu attribut align obsolète.Son utilisation est déconseillée sur la page.

bloc d'alignement au centre

Si vous voulez spécifier l'alignement du centre de la div, CSS peut offrir un moyen assez facile: utilisation de la marge d'indentation externe.Rembourrage peut être défini comme un des éléments de niveau bloc et la ligne-bloc.Svoysva valeur doit être définie à 0 (en retrait vertical) et automobiles (tirets horizontaux automatiques):

• margin: 0 auto;

maintenant cette option est reconnu comme absolument valide.Utilisation de remplissage externe vous permet également de spécifier l'alignement du centre: la propriété CSS marge nous permet de résoudre de nombreux problèmes liés à l'élément de positionnement sur la page.Bloc

Aligner sur le bord gauche ou droit

Parfois, l'alignement de centre CSS-chemin est pas nécessaire, mais il est nécessaire de mettre deux unités à côté d'un du côté gauche et l'autre - de la droite.Pour cette propriété il ya un flotteur, qui peut prendre une des trois valeurs: gauche, droite, ou aucun.Disons que vous avez deux unités qui doivent être mis en place.Ensuite, le code sera:

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

Si il est une troisième unité, qui doit être placé sous les deux premiers blocs (par exemple, le pied de page), ilvous devez vous inscrire la propriété claire: de

• {float: left;}
• .right {float: right}
• footer {clear: both}

fait que les blocs avec les classes à gauche et chute à droite de la totalecoulent, qui est, tous les autres éléments ignorés l'existence même d'éléments alignés.La propriété clear: both permet le pied de page ou toute autre unité de voir a chuté à partir des éléments de flux et interdit wrap (float) à la fois sur la gauche et la droite.Par conséquent, dans notre exemple, le pied va se déplacer vers le bas.

Il ya des cas où l'alignement de centre de jeu insuffisante CSS-façons, vous devez toujours changer la position verticale du bloc de l'enfant.Tout élément de ligne ou ligne-bloc peut être pressé contre le bord supérieur ou inférieur, situé au milieu de l'élément parent, ou être en tout lieu.Exiger plus souvent alignement de la boîte dans le centre, cet attribut est utilisé vertical-align.Supposons qu'il y ait deux unités, l'une dans l'autre.L'unité interne - élément ligne-bloc (display: inline-block).Il est nécessaire d'aligner l'unité enfant verticalement: l'alignement

• sur la limite supérieure - .child {vertical-align: top};Alignement au centre
• - .child {vertical-align: middle};Alignement
• à l'extrémité inférieure - .child {vertical-align: bottom};

sur des éléments de niveau bloc ou text-align, ou vertical-align pas applicables.

Les problèmes possibles avec les unités alignées

Parfois div aligner le centre de la CSS-chemin peut causer des problèmes mineurs.Par exemple, en utilisant float: par exemple, il ya trois blocs: .first, .SECOND et .third.Les deuxième et troisième blocs sont dans la première.Un élément avec une classe de deuxième bloc aligné à gauche, et le dernier - sur la droite.Après avoir aligné les deux sont tombés sur le flux.Si le parent est pas défini hauteur (par exemple, 30em), il ne sera plus é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é: après, qui vous permet également de revenir sur les blocs en place en créant psevdorasporki (dans cet exemple dans un div avec une classe de conteneur se trouve dans le .first et contient .left et .right):

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

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 pour créer psevdorasporki par des expériences.

Un autre problème fréquemment rencontré de mise en page - alignement des éléments ligne-bloc.Après chacun d'eux espace ajouté automatiquement.Pour faire face à cette propriété aide marge, qui est défini par l'indentation négative.Il existe d'autres méthodes qui sont utilisées moins fréquemment, par exemple, la réinitialisation de la taille de police.Dans ce cas, les propriétés de la société mère prescrite font-size: 0.Si situé à l'intérieur des blocs de texte, les propriétés des éléments ligne-bloc sont retournés à la taille désirée.Par exemple, font-size: 1em.La méthode est pas toujours commode, donc beaucoup plus souvent l'option avec des marges externes utilisés.

bloc d'alignement vous permet de créer belle et fonctionnelle mise en page et il est la disposition générale et l'emplacement des produits dans les magasins, et des photos sur un petit site web.