CSS vertikale Ausrichtung von Inline- / Inline-Block-Elementen

Ich versuche, mehrere inlineund inline-blockKomponenten vertikal in a auszurichten div. Wie kommt es, dass das spanin diesem Beispiel darauf besteht, heruntergedrückt zu werden? Ich habe beides versucht vertical-align:middle;und vertical-align:top;, aber nichts ändert sich.

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

ERGEBNIS:

GEIGE

vertical-aligngilt für die Elemente, die ausgerichtet werden, nicht für das übergeordnete Element. Gehen Sie stattdessen folgendermaßen vor, um die Kinder des Div vertikal auszurichten:

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

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

HINWEIS : beziehtvertical-align sich auf die aktuelle Textzeile und nicht auf die volle Höhe des übergeordneten Elements div. Wenn Sie möchten, dass das übergeordnete divElement größer ist und die Elemente dennoch vertikal zentriert sind, legen Sie die Eigenschaft 'anstelle der Eigenschaft div' fest . Folgen Sie dem obigen Link jsfiddle für ein Beispiel.line-heightheight

Gib vertical-align:top;nach a& span. So was:

a, span{
 vertical-align:top;
}

Überprüfen Sie dies http://jsfiddle.net/TFPx8/10/

Durch einfaches Verschieben beider Elemente nach links wird das gleiche Ergebnis erzielt.

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

inline-blockVerwenden Sie zur Feinabstimmung der Position eines Elements oben und links:

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

Danke CSS-Tricks !