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
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;
Ut labore.
Ullamco laboris.
Ut labore.
Ullamco laboris.
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;
Ut labore.
Ullamco laboris.
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
Ut labore.
Ullamco laboris.