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


142

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:
Geben Sie hier die Bildbeschreibung ein

GEIGE


Beachten Sie, dass dies nicht passieren wird, wenn <a>Elemente Text enthalten. Siehe diesen Link
S.Serpooshan

Antworten:


270

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


Dies funktioniert nicht mehr, wenn Sie eine Höhe für das Äußere angeben div.
Abhranil Das

4
@AbhranilDas vertical-alignist relativ zur aktuellen Textzeile, nicht zum übergeordneten Element. Damit dies wie gewünscht funktioniert, setzen Sie die Divs line-heightanstelle der height.
Diego


5

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

Das Problem beim Verschieben nach links besteht darin, dass sie in die nächste Zeile umgebrochen werden, wenn der Browser zu klein wird. Manchmal benötigen Sie Elemente, um auch über die Grenzen des Browsers hinaus inline zu bleiben. Dies inline-blockist daher die einzige Lösung.
Jake Wilson

Während dieses Verpackungsproblem ein Problem sein kann, würde ich sagen, dass dies eine wirklich gute Lösung für die Fälle ist, in denen das Verpacken in Ordnung ist. Es ist elegant, spricht den Geist des gewünschten Effekts an und erfordert keine Änderungen am Elternteil.
Crispen Smith

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.