Centrage des éléments en CSS
CHAPITRE 8
129
En écriture raccourcie cela donne :
On pourra de même centrer une page web dans le conteneur général du document, la
balise , en y centrant un bloc global renfermant tous les éléments.
Les écritures courtes suivantes synthétisent les propriétés margin-left et marginright :
ou encore :
Cette technique ne fonctionne pas dans Internet Explorer jusqu’à la version 5.5
incluse. Ces navigateurs vétérans comprendront en revanche la propriété textalign, mais en l’interprétant mal : rappelons qu’IE lui fait centrer à tort les éléments
de type bloc au lieu de ne la faire porter que sur les éléments en ligne.
CSS
div#conteneur {
background: yellow;
width: 300px;
}
div#conteneur p {
background: orange;
width: 200px;
margin-right: auto;
margin-left: auto;
}
div#conteneur p {
background: orange;
width: 200px;
margin: 0 auto;
}
Figure 8–3
Centrage horizontal
dans le flux
margin: 0 auto 0 auto;
margin: 0 auto ;
CHAPITRE 8
129
En écriture raccourcie cela donne :
On pourra de même centrer une page web dans le conteneur général du document, la
balise , en y centrant un bloc global renfermant tous les éléments.
Les écritures courtes suivantes synthétisent les propriétés margin-left et marginright :
ou encore :
Cette technique ne fonctionne pas dans Internet Explorer jusqu’à la version 5.5
incluse. Ces navigateurs vétérans comprendront en revanche la propriété textalign, mais en l’interprétant mal : rappelons qu’IE lui fait centrer à tort les éléments
de type bloc au lieu de ne la faire porter que sur les éléments en ligne.
CSS
div#conteneur {
background: yellow;
width: 300px;
}
div#conteneur p {
background: orange;
width: 200px;
margin-right: auto;
margin-left: auto;
}
div#conteneur p {
background: orange;
width: 200px;
margin: 0 auto;
}
Figure 8–3
Centrage horizontal
dans le flux
margin: 0 auto 0 auto;
margin: 0 auto ;
