Centrage vertical dans une DIV en inline-block

Bonjour,

A en juger par ce que je trouve sur les différents forum/blog/tuto, il semble admis que la propriété CSS vertical-align est censé fonctionner sur une div ayant également la propriété display:inline-block.

Or, si j'écris :

Code:

---

1 2 3 4 5 6 7 8 9 10

.test { display:inline-block; vertical-align:middle; border:1px solid #000; width:100px; height:100px; text-align:center; color:#000; font-weight:bold; }

---

puis dans le HTML

Code:

---

<div class="test">pouet</div>

---

le texte reste invariablement en haut, quelque soit le navigateur (FF ou chrome).

Je ne comprends pas pourquoi...

Je précise ne pas vouloir (pouvoir) utiliser autre chose que le inline-block (pas de table-cell ou de flex) et aimerai autant que possible éviter les bricolages, le nombre de ligne et la taille du texte étant variables dans la div.

En vous remerciant.

Bonjour,

Citation:

---

Je précise ne pas vouloir (pouvoir) utiliser autre chose que le inline-block (pas de table-cell ou de flex)

---

on peut toujours réussir à planter un clou avec un tournevis, mais c'est avec un marteau que l'on y arrive le mieux ^(*).

^(*) vieux, très, proverbe d'un charpentier.

C'est pour ça que je déteste les forums...

Tu détestes les forums pourquoi ?
- parce que tu n'aimes pas les citations ?
- parce que on ne te dis pas ce que tu voudrais entendre ?
- parce que tu n'arrives pas à tirer enseignement de ce que tu lis ?
- parce que ...

Revenons à notre mouton !
• Un élément en inline n'occupe que la place nécessaire à son contenu, le passer en inline-bloc permet de le dimensionner.
• Pour un élément inline, le centrage vertical est associé à line-height et est donc non applicable à ce que tu cherches à faire puisque tu peux avoir plusieurs lignes suivant la taille du texte.

1st soluce :
On peut donner l'impression d'un centrage vertical en ajoutant un padding, mais il ne faut pas avoir de hauteur fixée pour l'élément ce qui est ton cas.

2nd soluce :
Il te faut donc avoir recours à un conteneur et un contenu, mais c'est déjà peut être du bricolage pour toi !.

Code:

---

1 2 3

<div class="test"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisl nisl, facilisis ut ex varius, dignissim placerat magna.</p> </div>

---

Il faut fixer une hauteur et/ou une line-height de même valeur pour que l'effet soit visible, avec le CSS suivant pour exemple

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.test { height:8em; /* a convenir */ line-height:8em; /* même que la hauteur */ width:50%; background:#cde; } .test p{ display:inline-block; vertical-align:middle; margin:0; line-height:normal; }

---

L'inconvénient majeur est que dans ce cas si tu redimensionnes l'écran il peut y avoir débordement du fait que la hauteur est fixée.

Cette solution n'est donc pas franchement acceptable si tu ne connais pas par avance la taille du texte.

x^iéme soluce :
On pourrait continuer les exemples avec des structures différentes, plus ou moins "bancales", mais le plus simple dans ton cas de figure, et parfaitement reconnu depuis IE8 reste le...display:table-cell.

Je suis navré de cette conclusion, mais les intégrateurs l'on tellement attendu que maintenant qu'il l'on il ne la lâche plus quand elle leur simplifie la tâche ;)

Plus d'infos sur http://www.w3.org/TR/CSS2/visudet.ht...vertical-align