03/07/2006 : Création - Première publication. 07/07/2006 : Correction présentation et ajout lien pour contribution.

Dans ce tutoriel, nous avons appris :

• à centrer une boite de type block dans une colonne;
• à définir une boite de largeur identique quelque soit le navigateur.

Certes, la solution proposée utilise l'attribut style des balises xhtml. Cependant, cette solution met en œuvre uniquement des propriétés de styles CSS.

Aussi, pour ceux qui souhaiteraient employer cette technique dans un template, voici le code PHP :

01
02
03
04
05
06
07

<div Id="box_main">
  <div Id="box_out">
    <div Id="box_in">
      Placez le contenu à centrer ici !
    </div>
  </div>
</div>

Et la feuille de style CSS :

#box_main {
   text-align: center; /* Centrage anciens navigateurs */
}
#box_out {
   width: 242px; /* Largeur de l'élément /* 
   margin: 0 auto; /* Centrage navigateurs modernes */
}
#box_in {
   background-color: #D4EEFF; /* Couleur du fond de l'élément (facultatif) */
   padding: 10px; /* Espacement autour de l'élément (facultatif)*/
   border: 1px solid navy; /* bordure autour de l'élément (facultatif) */
}

La largeur (width) du style #box_out doit être égal à la largeur du contenu à centré augmenté de la somme des élements suivants du style #box_out :

• border-width-left
• padding-left
• padding-right
• border-width-right

L'encadrement par la balise <div Id="box_main"> n'est pas nécessaire si et seulement si une propriété text-align: center; est définie dans un conteneur précédent (dont la boite hérite). Dans ce cas, le style #box_main est sans objet.

Il est possible d'inclure une image à l'aide du bot mosimage dans l'élément à centrer. Dans ce cas, il faut tenir compte de l'attribut hspace="6", généré par le bot mosimage, et définir le padding en conséquence. Curieusement, certains navigateurs ignorent cet espacement...

Allez, une dernière petite image pour finir en beauté...

Le Surf, c'est vraiment super !

Et il y a pas que des planches !