Comment centrer vos < div > comme un pro.
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
Jean-Luc Houédanou est un blogueur spécialisé dans l’innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l’Université de Sherbrooke, il a travaillé sur des projets d’envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique.
Il aide, par le biais de ce blog, les lecteurs à s’adapter aux évolutions rapides de la technologie et des tendances du marché.
En plus de ses articles sur l’innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d’opinion et donne des conseils sur le bien-être mental. Son objectif est d’aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.