CSS Alignement horizontal

En CSS, plusieurs propriétés sont utilisées pour aligner des éléments horizontalement.

---

Alignement des éléments de bloc

Elément de bloc est un élément qui occupe toute la largeur complète disponible, et a une coupure de ligne avant et après elle.

Exemples d'éléments de bloc:

• <h1>
• <p>
• <div>

Pour l'alignement du texte, voir le texte CSS chapitre.

Dans ce chapitre, nous allons vous montrer comment aligner horizontalement les éléments de bloc à des fins de mise en page.

---

Centre Alignement Utilisation de la propriété de marge

Éléments Block peuvent être alignés en définissant les marges gauche et droite pour "auto".

Remarque: En utilisant margin: auto ne fonctionne pas dans IE8 et plus tôt, à moins d'une déclaration DOCTYPE est déclarée!.

Réglage des marges gauche et droite à l'auto précise qu'ils devraient se répartir la marge disponible également. Le résultat est un élément axé sur:

Exemple

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

Essayez vous-même »

Astuce: Alignement n'a aucun effet si la largeur est de 100%.

Remarque: Dans IE5 il ya un bug de traitement de marge pour les éléments de bloc. Pour rendre le travail en exemple ci-dessus IE5, ajouter un peu de code supplémentaire. Essayez vous-même

---

Gauche et Droite Alignement Utilisation de la propriété position de

Une méthode d'éléments d'alignement est d'utiliser le positionnement absolu:

Exemple

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

Essayez vous-même »

Remarque: Absolute éléments positionnés sont retirés de la circulation normale, et peuvent se chevaucher éléments.

---

Problèmes de compatibilité Crossbrowser

Lors de l'alignement des éléments de ce genre, il est toujours une bonne idée de prédéfinir marge et le remplissage de l'élément body. Il s'agit d'éviter des différences visuelles dans différents navigateurs.

Il ya un problème avec IE8 et versions antérieures, lors de l'utilisation de la propriété position. Si un élément conteneur (dans notre cas <div class="container">) a une largeur spécifiée, et la déclaration! DOCTYPE est absent, les versions IE8 et plus tôt sera ajouter une marge de 17px sur le côté droit. Cela semble être l'espace réservé à une barre de défilement. Toujours régler la déclaration DOCTYPE lorsque vous utilisez la propriété position:

Exemple

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

Essayez vous-même »

---

Gauche et Droite Alignement Utilisation de la propriété float

Une méthode d'éléments d'alignement est d'utiliser la propriété float:

Exemple

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

Essayez vous-même »

---

Problèmes de compatibilité Crossbrowser

Lors de l'alignement des éléments de ce genre, il est toujours une bonne idée de prédéfinir marge et le remplissage de l'élément body. Il s'agit d'éviter des différences visuelles dans différents navigateurs.

Il ya un problème avec IE8 et plus tôt si vous utilisez la propriété float. Si la déclaration! DOCTYPE est absent, les versions IE8 et plus tôt sera ajouter une marge de 17px sur le côté droit. Cela semble être l'espace réservé à une barre de défilement. Toujours régler la déclaration DOCTYPE lorsque vous utilisez la propriété float!:

Exemple

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

Essayez vous-même »