En utilisant la largeur, max-width et margin: auto;
Comme mentionné dans le chapitre précédent; un bloc-niveau élément prend toujours la pleine largeur disponible (étirements vers la gauche et à droite dans la mesure où elle peut).
Le réglage de la width d'un élément de niveau bloc , on l' empêche de s'étirer vers les bords de son conteneur. Ensuite, vous pouvez définir les marges à l'auto, pour centrer horizontalement l'élément dans son conteneur. L'élément prendra la largeur spécifiée, et l'espace restant sera divisé à parts égales entre les deux marges:
Remarque: Le problème avec le <div> ci - dessus se produit lorsque la fenêtre est plus petite que la largeur de l'élément. Le navigateur ajoute alors une barre de défilement horizontale à la page.
Utilisation max-width à la place, dans cette situation, permettra d' améliorer la manipulation du navigateur de petites fenêtres. Ceci est important lors de la prise d'un site utilisable sur les petits appareils:
Astuce: Redimensionner la fenêtre du navigateur à moins de 500px de large, pour voir la différence entre les deux divs!
Voici un exemple des deux divs ci-dessus:
Exemple
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Essayez - le vous - même »