CSS alignement vertical en ligne/inline-block éléments

Question

Je vais essayer d'obtenir plusieurs inline et inline-block composants alignés verticalement dans un div. Comment se fait l' span dans cet exemple, insiste sur le fait d'ê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

Answer 1

vertical-align s'applique aux éléments alignés, pas de leur élément parent. Pour aligner verticalement le div de ses enfants, de faire ceci à la place:

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

Voir: http://jsfiddle.net/TFPx8/11/

Answer 2

Donnez vertical-align:top; en a & span. Comme ceci:

a, span{
 vertical-align:top;
}

Cochez cette http://jsfiddle.net/TFPx8/10/

Answer 3

Simplement flottant à la fois des éléments de 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;
}

Answer 4

Je pense que c'est en montrant ici parce que votre <a> balises n'ont pas de contenu. J'ai ajouté un   de chacun et il affiche comme prévu.