[Résolu] Aligner verticalement contenu <li>

Bonjour,

Je souhaite centrer verticalement le contenu de ma liste, mais cela ne fonctionne pas.

Voici mon code, visiblement, quelques chose m'échappe.

ul 
     {
          border-style:inset;
          height:100px;
}
li 
     {
          border-style:inset;
	  display:inline-block;
	  height:90px;
	  vertical-align:middle;
      }

<ul>
         <li>Elmt1</li>
	 <li>Elmt2</li>
	 <li>Elmt3</li>
</ul>

Si je mets display:table-cell dans li, ça fonctionne.
Je ne suis pas sur de bien comprendre la différence entre inline-block et table-cell

Pouvez-vous m'aiguiller svp ?

Merci d'avance.

Tu sais que tu as aussi display: block; ?
utilise le sur tes li.

Bonjour,

Oui je sais qu'il existe aussi block mais je voudrais que mes li soient les uns à coté des autres tu vois ?

Oui pardon, j'avais mal compris.

la différence ce fait au niveau du redimensionnement de la page.

ul -> table row
li -> table-cell

exemple pour voir la différence
Modifié par JENCAL (14 Dec 2015 - 14:54)

D'accord, merci je considère le problème comme résolu je vais reprendre la documentation pour approfondir mes connaissances sur le sujet.

Merci de ton aide.

Si non si tes <li> ne passent jamais à la ligne, tu peux passer par line-height qui doit être à peu près égal à la hauteur de tes <li>.