Alignement vertical CSS des éléments inline / inline-block

J’essaie d’obtenir plusieurs composants inline et inline-block alignés verticalement dans un div . Comment se fait-il que la span de cet exemple insiste pour être repoussée? J’ai essayé les deux vertical-align:middle; et vertical-align:top; , mais rien ne change.

HTML:

 
Some text

CSS:

 a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } 

RÉSULTAT:
entrer la description de l'image ici

VIOLON

vertical-align s’applique aux éléments alignés et non à leur élément parent. Pour aligner verticalement les enfants du div, procédez comme suit:

 div > * { vertical-align:middle; // Align children to middle of line } 

Voir: http://jsfiddle.net/dfmx123/TFPx8/1186/

REMARQUE : vertical-align est relatif à la ligne de texte actuelle et non à la hauteur totale du div parent. Si vous souhaitez que le div parent soit plus grand et que les éléments soient toujours centrés verticalement, définissez la propriété de line-height du div au lieu de sa height . Suivez le lien jsfiddle ci-dessus pour un exemple.

Donne vertical-align:top; dans a & span . Comme ça:

 a, span{ vertical-align:top; } 

Vérifiez ceci http://jsfiddle.net/TFPx8/10/

Il suffit de laisser les deux éléments flotter pour obtenir le même résultat.

 div { background:yellow; vertical-align:middle; margin:10px; } a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; float:left; } span { background:red; display:inline-block; float:left; }