Latest web development tutorials

CSS alignement horizontal (Horizontal Align)

En CSS, il y a plusieurs propriétés pour l'élément d'alignement horizontal.

Aligner les éléments de bloc

élément Block est un élément, en prenant toute la largeur de l'avant et à l'arrière sont des sauts de ligne.

Des exemples d'éléments de bloc:

  • <H1>
  • <P>
  • <Div>

Alignement du texte, voir le texte CSS section. .

Dans ce chapitre, nous allons vous montrer comment bloquer l'alignement horizontal des éléments de mise en page.

Centre-aligné, en utilisant la propriété de marge

éléments de blocs peuvent être marges gauche et droite fixées à l'alignement "Auto".

Remarque: Utilisez la marge IE8: propriété auto ne fonctionne pas, à moins que DOCTYPE déclarée!

propriétés de marge peuvent être arbitrairement divisés en gauche et les paramètres de marge droite sont automatiquement affectés, le résultat est l'apparition de l'élément central:

Exemples

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Essayez »

Remarque: Si la largeur est de 100%, l'alignement ne sont pas efficaces.

Remarque: IE5 il y a une marge dans l'élément BUG de bloc de traitement.Pour rendre l'exemple ci-dessus travail IE5, nous avons besoin d'ajouter un peu de code supplémentaire. Exemples

Utilisation de la propriété position est définie à gauche, aligné à droite

alignement Un élément est d'utiliser le positionnement absolu:

Exemples

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Essayez »

Remarque: Le positionnement absolu n'a rien à voir avec le flux du document, de sorte qu'ils peuvent couvrir d' autres éléments sur la page.

Crossbrowser Problèmes de compatibilité

<P align similaire lorsque ces éléments, une marge prédéterminée et élément de rembourrage est toujours une bonne idée. Ceci afin d'éviter des différences visuelles dans les différents navigateurs.

IE8 et plus tôt ont un problème lors de l'utilisation de la propriété position. Si un élément conteneur (dans ce cas <div class = "conteneur">) de largeur spécifiée ,! déclaration DOCTYPE est manquante, IE8 et les versions antérieures ajouteront une marge de 17px à droite. Cela semble être un espace de réserve de roulement. Lorsque vous utilisez la propriété position est toujours définie dans la déclaration DOCTYPE!

Exemples

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Essayez »

Utilisation de la propriété float à gauche, aligné à droite

Utilisation de la propriété float est l'un de la méthode d'élément d'alignement:

Exemples

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Essayez »

Crossbrowser Problèmes de compatibilité

Les éléments alignés comme celui-ci, l'élément de marge et le remplissage prédéterminé est toujours une bonne idée. Ceci afin d'éviter des différences visuelles dans les différents navigateurs.

IE8 et plus tôt ont un problème lors de l'utilisation de la propriété float. Si un élément conteneur (dans ce cas <div class = "conteneur">) de largeur spécifiée ,! déclaration DOCTYPE est manquante, IE8 et les versions antérieures ajouteront une marge de 17px à droite. Cela semble être un espace de réserve de roulement. Lors de l'utilisation de la propriété float est toujours fixé dans la déclaration DOCTYPE!

Exemples

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Essayez »