En CSS, plusieurs propriétés peuvent être utilisées pour aligner des éléments horizontalement.
Centre Aligner - Utiliser la margin
Réglage de la largeur d'un élément de niveau bloc, on l'empêche de s'étirer vers les bords de son conteneur. Utilisez margin: auto; , pour centrer horizontalement un élément dans son conteneur.
L'élément prendra alors la largeur spécifiée, et l'espace restant sera divisé à parts égales entre les deux marges:
Exemple
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Essayez - le vous - même » Astuce: Centre d' alignement n'a pas d' effet si la width propriété est pas défini (ou réglé à 100%).
Astuce: Pour l' alignement du texte, voir le CSS texte chapitre.
Gauche et Droite Aligner - Utiliser la position
Une méthode pour les éléments à aligner est d'utiliser position: absolute; :
Exemple
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Essayez - le vous - même » Remarque: Les éléments positionnés absolus sont retirés de la circulation normale, et qui peuvent se chevaucher les éléments.
Astuce: Lors de l' alignement des éléments avec la position , toujours définir la margin et le padding pour le <body> élément. Ceci afin d'éviter des différences visuelles dans les différents navigateurs.
Il y a aussi un problème avec IE8 et plus tôt, lors de l' utilisation la position . Si un élément conteneur (dans notre cas <div class="container"> ) a une largeur spécifiée et la !DOCTYPE Déclaration est manquante, IE8 et les versions antérieures ajouteront une 17px margin sur le côté droit. Cela semble être l'espace réservé à une barre de défilement. Donc, réglez toujours le !DOCTYPE Déclaration lorsque vous utilisez la position :
Exemple
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Essayez - le vous - même » Gauche et Droite Aligner - Utiliser float
Une autre méthode pour les éléments à aligner est d'utiliser le float bien:
Exemple
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Essayez - le vous - même » Astuce: Lors de l' alignement des éléments avec float , toujours définir la margin et le padding pour le <body> élément. Ceci afin d'éviter des différences visuelles dans les différents navigateurs.
Il y a aussi un problème avec IE8 et plus tôt, lors de l' utilisation float . Si le !DOCTYPE Déclaration est manquante, IE8 et les versions antérieures ajouteront une 17px margin sur le côté droit. Cela semble être l'espace réservé à une barre de défilement. Donc, réglez toujours le !DOCTYPE Déclaration lors de l' utilisation float :
Exemple
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Essayez - le vous - même »