Bac à Sable

Tests en html, css et javascript

Le centrage s'effectue sur des éléments en display:inline-bloc; Voir les tests de centrage vertical et horizontal d'éléments dans le flux

Centrage vertical de 2 éléments sur une unique ligne

Centrage vertical avec vertical-align:middle

Exemple 1 : centrage vertical de 2 textes

les textes sont alignés sur le milieu des lettres. Il y a donc un décalage des lignes de bases ou baseline.

Ut labore.

Ullamco laboris.

Exemple 2 : centrage vertical d'une illustration et d'un texte

image 65pxX57px

Ullamco laboris.

Centrage des lignes de base de 2 titres avec vertical-align:baseline

Ut labore.

Ullamco laboris.

Inconvénient du centrage sur la ligne de base : lorsque le texte se répartit sur 2 lignes par manque de place en largeur, il s'aligne sur la ligne de base de la dernière ligne. Il n'est donc plus centré.

Centrage vertical d'une illustration et de 2 textes sur une unique ligne

Mon avis : la solution qui maintient le centrage en toute circonstance : illustration en position absolue, texte en inline-block et centrage sur le milieu

Centrage sur la ligne de base des éléments en display:inline-block;

Le centrage des textes est effectué par rapport à leur ligne de base par vertical-align:baseline;

Le centrage de l'illustration par rapport à la ligne de base des textes est effectué par vertical-align:middle;

image 65pxX57px

Ut labore.

Ullamco laboris.


image 65pxX57px

Ut labore.

Ullamco laboris.


image 65pxX57px

Ullamco laboris.

L'illustration est donc centrée sur la ligne de base des deux textes et non sur le milieu du texte.

L'inconvénient du centrage sur la ligne de base existe toujours : lorsque l'un des textes se répartit sur 2 lignes par manque de place en largeur, il s'aligne sur la ligne de base de sa dernière ligne. L'illustration et les textes ne sont plus centrés.

Centrage sur le milieu du texte avec une illustration en position absolue

Position de l'illustration

L'illustration est placée hors flux avec position:absolute; left:0;

Le conteneur doit être pris en référence avec position:relative;
L'illustration est centrée par top:50%; margin-bottom:-h/2; (h: hauteur de l'illustration)

correctif pour IE6 : La position absolue de l'illustration necessite que le conteneur ait le layout (ex float:left)

Position des textes

les deux textes sont dans le flux en display:inline-block;
Le premier texte laisse la place de l'illustration avec padding-left:w; (w: largeur de l'illustration)

Exemple 1 : vertical-align:baseline

Le centrage des textes est effectué par la ligne de base par vertical-align:baseline;

image 65pxX57px

Ut labore.

Ullamco laboris.


image 65pxX57px

Ut labore.

Ullamco laboris.

L'inconvénient du centrage sur la ligne de base existe toujours :
lorsque l'un des textes se répartit sur 2 lignes par manque de place en largeur, les deux textes s'aligne sur la ligne de base de leur dernière ligne. Mais l'illustration reste centrée sur le bloc texte le plus haut.

Exemple 2 : vertical-align:middle

Mon avis : solution toujours centrée y compris avec un des textes se plaçant sur plusieurs lignes.

Le centrage des textes est effectué par la ligne de base par vertical-align:middle;
Voir le test centrage vertical de bloc composite


image 65pxX57px

Ut labore.

Ullamco laboris.


image 65pxX57px

Ut labore.

Ullamco laboris.

Tests de solutions
responsive web design
html, css, jquery