Intégrateurs, Intégratrices, aujourd’hui…
Je vais vous éviter des maux de tête, en vous montrant une astuce permettant de centrer les <div> dans tous les navigateurs, peu importe les résolutions d’écran, sans javascript, ni hack css spécifique à Internet Explorer. Pour ce faire, il faudra rédiger votre DOM en prenant le soin de mettre le bloc à centrer dans un bloc englobant, comme le code ci dessous le montre
<div id= »contenant »><
<div id= »contenu »><!–le bloc qui doit être centre–></div>
</div>
Attribuez ensuite des styles spécifiques à chaque bloc, comme le code ci dessous le montre:
#contenant{
width:100%;
position:relative;
text-align:center;
clear:both;
/*vos declarations de style ici*/
}
#contenu{
width:1016px /*ou celle qui vous convient le plus*/;
position:relative;
margin: 0 auto
/*vos declarations de style ici*/}
Et admirez le résultat. Le bloc est centré, grâce à l’effet combiné des trois propriétés css ci dessous:
- width:100%;
- text-align:center;
- margin:0 auto;
De rien.
Jean Luc Houédanou
