CSS вертикальное выравнивание встроенных/встроенных блочных элементов

Я пытаюсь получить несколько компонентов inlineи inline-block, выровненных по вертикали в div. Почему spanв этом примере настаивает на том, чтобы его опустили? Я пробовал как vertical-align:middle;, так и vertical-align:top;, но ничего не меняется.

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;
}

​ РЕЗУЛЬТАТ:

FIDDLE