Wie wird Text vertikal neben einem Floating-Bild ausgerichtet?

Ich möchte eine Spanne nach einem Floating-Bild vertikal ausrichten. Ich suchte im Stapelüberlauf und finde this post. aber mein Bild ist schwebend.Wie wird Text vertikal neben einem Floating-Bild ausgerichtet?

<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 ändern!

Dank

Quelle

2012-05-09 Mosijava

Nun, so scheint es zu ändern, wenn Sie geben 'vertical-align: middle' zu Bild. Ich habe es in Chrome getestet. – petrichor

Sie haben ein ';' im 'style' für Ihr' img' zwischen 'height' und' float' vergessen. – Maehler

@McFjodor Danke, ich habe es bearbeitet – Mosijava

Zuerst entfernen Sie float daraus. Schreiben wie folgt aus:

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

prüfen diese http://jsfiddle.net/ws3Uf/

Quelle

2012-05-09 12:40:56 sandeep

Ich benutze Ihren Ansatz und ich entferne meinen Float von meinem Bild . Aber wenn ich '' Inhalt zu etwas ändern, das lang 2 Linie, geht die zweite Linie zum Ende des Bildes Endlich, füge ich 'Anzeige: Inline-Block' zu '' hinzu und es funktioniert! Vielen Dank – Mosijava

@Mosijava - Inline-Block funktioniert nicht für mich - es bringt nur alles auf die nächste Zeile. Hast du ein Beispiel dafür? – Nick

Dies hat nicht den gleichen Effekt wie "float", wenn der Text lang genug ist, um mehrere Zeilen zu benötigen. http://jsfiddle.net/9667cqun/ –

A <span> ist ein Inline-Element, versuchen display:block auf die Spanne hinzufügen, es die gleiche Höhe wie das Bild geben und eine Zeilenhöhe anzupassen. Schweben Sie es auch links. Das sollte funktionieren

Quelle

2012-05-09 12:40:16 atmd

Es funktioniert nicht für mich – Mosijava

wirklich ?, check out http://jsbin.com/owiyuc/edit#html,live – atmd

Sie auch manuell

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

Demo

ändern oder Sie können ein table

Quelle

2012-05-09 12:41:33

hinzufügen line-height (gleich verwenden zu Bildhöhe):

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

See example.

Quelle

2012-05-09 12:46:04 ScottS

Was ist, wenn die Spanne 2 Zeilen lang haben? – Mosijava

@ Mosijava - diese Lösung funktioniert nur für eine einzige Textzeile.Ich bin froh, dass Sandeeps Lösung für Sie funktioniert hat (Sie haben offensichtlich nicht den "Float" auf dem Bild benötigt, wie es Ihr Titel vorgeschlagen hat). – ScottS

Sie folgendes tun können:

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

Quelle

2013-11-07 18:57:01

Auch wenn dies eine extrem alte Post, können Sie erreichen dies mit Flexbox:

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 example

Quelle

2016-07-03 10:19:18

Wie wird Text vertikal neben einem Floating-Bild ausgerichtet?

Antwort

Verwandte Themen