Allineamento verticale CSS di elementi inline / inline-block

Sto cercando di allineare diversi componenti inlinee inline-blockverticalmente in a div. Come mai spanin questo esempio insiste per essere spinto verso il basso? Ho provato entrambi vertical-align:middle;e vertical-align:top;, ma non cambia nulla.

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

RISULTATO:

VIOLINO

vertical-alignsi applica agli elementi da allineare, non al loro elemento principale. Per allineare verticalmente i figli del div, fai invece questo:

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

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

NOTA : vertical-alignè relativo alla riga di testo corrente, non all'altezza completa del genitore div. Se vuoi che il genitore divsia più alto e abbia ancora gli elementi centrati verticalmente, imposta la proprietà div's line-heightinvece che sua height. Segui il link jsfiddle sopra per un esempio.

Dare vertical-align:top;a a& span. Come questo:

a, span{
 vertical-align:top;
}

Controlla questo http://jsfiddle.net/TFPx8/10/

Il semplice spostamento di entrambi gli elementi a sinistra consente di ottenere lo stesso risultato.

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

Per ottimizzare la posizione di un inline-blockelemento, utilizzare in alto e a sinistra:

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

Grazie trucchi CSS !