Alineación vertical CSS de elementos en línea / bloque en línea

Estoy tratando de alinear varios componentes inliney inline-blockverticalmente en a div. ¿Cómo es que spanen este ejemplo insiste en ser empujado hacia abajo? He intentado ambos vertical-align:middle;y vertical-align:top;, pero nada cambia.

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

RESULTADO:

VIOLÍN

vertical-alignse aplica a los elementos que se alinean, no a su elemento padre. Para alinear verticalmente a los hijos del div, haga esto en su lugar:

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

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

NOTA : vertical-alignes relativo a la línea de texto actual, no a la altura total del elemento primario div. Si desea que el padre divsea ​​más alto y aún tenga los elementos centrados verticalmente, establezca la propiedad div's en line-heightlugar de su height. Siga el enlace jsfiddle anterior para ver un ejemplo.

Dar vertical-align:top;en ay span. Me gusta esto:

a, span{
 vertical-align:top;
}

Mira esto http://jsfiddle.net/TFPx8/10/

Simplemente flotando ambos elementos a la izquierda se obtiene el mismo resultado.

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

Para ajustar la posición de un inline-blockelemento, use la parte superior e izquierda:

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

Gracias CSS-Tricks !