web-dev-qa-db-de.com

wie kann ich Text neben einem schwebenden Bild vertikal ausrichten?

Ich möchte einen Span nach einem schwebenden Bild vertikal ausrichten ... Ich habe danach im Stapelüberlauf gesucht und finde diesen Beitrag . aber mein Bild ist schwebend.

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

Ich gebe vertical-align:middle zum Bild und nichts ändert sich!

Vielen Dank

18
Mosijava

Zuerst float daraus entfernen. Schreiben Sie wie folgt:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

Überprüfen Sie diese http://jsfiddle.net/ws3Uf/

10
sandeep

Obwohl dies ein sehr alter Beitrag ist, können Sie dies mit Flexbox erreichen:

div {
 display: flex;
 align-items: center;
}
<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

JsFiddle Beispiel

9
The Codesee

Fügen Sie line-height hinzu (entspricht der Bildhöhe):

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

Siehe Beispiel.

6
ScottS

Ein <span> ist ein Inline-Element. Versuchen Sie, dem Bereich display:block hinzuzufügen, geben Sie ihm dieselbe Höhe wie das Bild und eine entsprechende Zeilenhöhe. Float es auch verlassen. Das sollte funktionieren

1
atmd

Sie können auch manuell ändern

<div>
    <img style="width:30px;height:30px float:left">
    <span style="float:left;padding-top:15px;">Will work.</span>
</div>

Demo

Oder Sie können eine Tabelle verwenden

1
huMpty duMpty

Sie könnten folgendes tun: 

  div:after {
        content:"";
        clear:both;
        display:block;
    }