Blocs centrés

Introduction du cours

Ah, le centrage des blocs… Sujet délicat. :D Je vous présente ici une méthode qui marche pour tous les navigateurs, propre et valide.
On va voir comment centrer nos blocs horizontalement, et/ou verticalement. Ainsi, vos messages d'erreurs (404/403, que sais-je encore) ne seront plus sur le côté, en haut, … :)

Suivez le guide ! :)

Centrer vos blocs horizontalementIntroduction

La partie la plus facile ! :p En fait, vous avez trois cas de figure :

1. Vous connaissez sa largeur en pourcentage

2. Vous connaissez la largeur de votre bloc en unités (px, pt, em, ?)

3. Vous ne connaissez pas sa largeur

Ces trois cas de figure correspondront à 3 sous-sous-parties. :D
Ah, on aura aussi besoin d'un exemple : :p

<div class="bloc_centre"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam elit metus, fermentum a, hendrerit sed, luctus sit amet, tellus. Etiam faucibus est eu velit. Morbi tristique vulputate sem. Nam et lacus. Donec ac turpis. Donec bibendum interdum velit. Quisque egestas, neque ac elementum mattis, dui arcu facilisis mauris, sit amet hendrerit lacus mauris vitae felis. Aliquam erat volutpat. Sed sapien purus, ultricies vitae, pretium et, cursus eget, purus. Praesent elit. Sed eros. Nullam lacinia ante non nunc. </div>

Texte généré grâce à lipsum.org.

1. Vous connaissez la largeur en %

Ce cas de figure arrive surtout pour les designs extensibles. C'est aussi le plus simple à gérer. :) Vous avez donc ce CSS-ci :

.bloc_centre{ ? width:60%; ? }

Rajoutez simplement la ligne suivante, qui va éloigner votre bloc du bord de sa moitié :

.bloc_centre{ ? width:60%; margin-left:20%; ? }

Evidemment, si votre bloc faisait 50% de large, vous devez faire votre margin-left de 25% ! :p
Et c'est tout ! Je vous avais dit que c'était le cas le plus simple. :)

2. Vous connaissez la largeur en unités

On a souvent ça pour les designs fixes. Votre CSS est (par exemple) le suivant :

.bloc_centre{ ? width:400px; ? }

Là, on va d'abord coller notre bloc au milieu, puis le faire reculer de moitié pour qu'il soit vraiment centré :

.bloc_centre{ ? width:400px; position:absolute; left:50%; margin-left:-200px; ? }

Là, si votre bloc faisait 500px de large, vous auriez dû appliquer un margin-left de -250px. :)

3. Vous ne connaissez pas la largeur

Elle est en fait valable pour tous les cas de figure. Néanmoins, vous devrez adapter votre CSS pour rétablir l'alignement du texte dans tous vos autres blocs. Changez juste votre CSS comme ceci :

body{ ? text-align:center; ? } .bloc_centre{ ? text-align:left; ? }

Note : ne rajoutez le text-align:left uniquement si vous voulez que le texte dans votre div soit centré. :)

Centrer vos blocs verticalement

Ah, on attaque le vif du sujet ! :p
Là encore, les 3 mêmes cas de figure.

1. Vous connaissez la hauteur en %

Modifiez votre CSS exactement comme tout à l'heure :

.bloc_centre{ ? height:60%; margin-top:20%; ? }

Facile, n'est-ce pas ? :p

2. Vous connaissez la hauteur en unités

Là encore, c'est simplissime :

.bloc_centre{ ? height:200px; position:absolute; top:50%; margin-top:-100px; ? } 3. Vous ne connaissez pas la hauteur

Bon, là, on va quitter le "sémantiquement correct". En effet, la seule façon de centrer vos blocs verticalement sera de les mettre dans un tableau qui englobera votre page.

Ce n'est pas correct sémantiquement, mais c'est tout à fait valide !

Modifiez votre (x)HTML comme suit :

<table> <tr> <td class="bloc_centre"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam malesuada. In hac habitasse platea dictumst. Aliquam nec erat sed ante consequat sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse mattis, augue id mattis pulvinar, diam massa rutrum nisl, et elementum justo ipsum a ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at nisl sit amet mi aliquam consectetuer. Phasellus eleifend lacus id massa. Nunc egestas interdum justo. Etiam ornare lorem tempus libero. </td> </tr> </table>

Maintenant, changez votre CSS comme ça :

.bloc_centre{ ? vertical-align:center; ? }

Cette méthode est moche, vilaine, à proscrire ! :colere2: Prenez autant que possible les autres !

Vous savez désormais comment centrer vos blocs. Les applications sont multiples et variées, et je ne doute pas que vous en fassiez un bon usage. :) Nous verrons prochainement comment faire des blocs fixes sans JavaScript… ;)

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : CSS HTML Web

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.