[Résolu] Centrage vertical avec line-height & vertical-align

Bonsoir,

J'aimerai avoir quelques éclaircissements sur le positionnement vertical d’éléments avec les propriétés CSS: line-height et vertical-align.

Avec line-height: Lorsque le conteneur contient du texte qui tient sur une seule ligne, il suffit de définir pour l'élément à centrer une hauteur équivalente au height du conteneur parent. Jusqu'ici tout va bien.
Le problème se présente lorsque le texte à centrer fait plusieurs lignes; il y'a un sérieux décalage qui gâche tout.

Avec vertical-align: Comment procéder pour un centrage vertical dans une boite qui contient déjà un display (inline-block par exemple) ? Faut-il écrire par exemple:

div.boite {
width: 230px;
height: 120px;
display: inline-block;
display: table-cell;
vertical-align: middle;

Le problème ici c'est l'application de deux display sur le même élément...

Merci pour vos retours.
Modifié par Wingate (23 Dec 2012 - 21:52)

Bonsoir,

Ce tutoriel pourrait peut-être t'aider ?
Comment centrer verticalement sur tous les navigateurs ?

Ah oui, j'ai loupé ce tuto; il est très exhaustif sur le sujet.

Mais pour le deuxième cas de figure, est-ce "problématique" d'indiquer deux display pour un seul élément ?

Merci.
Modifié par Wingate (24 Dec 2012 - 23:38)

Bonjour,

Un seul fonctionnera, le dernier indiqué ou le dernier compris par le navigateur

Joyeux noël.

ps : décroches un peu, respire le bon air

Merci.
Tu dis, "le dernier compris par le navigateur" ? C'est toujours le dernier élément qui est pris en compte lorsque plusieurs propriétés identiques sont spécifiées non ?
Modifié par Wingate (26 Dec 2012 - 22:33)