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

Je suis en train de faire plusieurs inlineet inline-blockcomposants alignés verticalement dans un div. Comment se fait-il que, spandans cet exemple, insiste pour être poussé vers le bas? J'ai essayé les deux vertical-align:middle;et vertical-align:top;, mais rien ne change.

HTML:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

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:

VIOLON

vertical-aligns'applique aux éléments alignés, pas à 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-alignest relatif à la ligne de texte actuelle, pas à la hauteur totale du parent div. Si vous vouliez que le parent divsoit plus grand et que les éléments soient toujours centrés verticalement, définissez la propriété div's line-heightau lieu de sa height. Suivez le lien jsfiddle ci-dessus pour un exemple.

Donnez vertical-align:top;à a& span. Comme ça:

a, span{
 vertical-align:top;
}

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

Le simple fait de flotter les deux éléments vers la gauche permet d'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;
}

Pour affiner la position d'un inline-blockélément, utilisez le haut et la gauche:

  position: relative;
  top: 5px;
  left: 5px;

Merci CSS-Tricks !