Tutoriel : Blocs centrés

Introduction

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é. :)

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.

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;
    ?
    }

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… ;)