Wie richtet man Text neben einem Floating-Bild vertikal aus?

Möchte ich vertikal ausrichten einer Zeitspanne nach einer gefloateten Bild.
Ich suchte Sie in der stack-überlauf und finden dieser Beitrag. aber mein Bild ist geschwommen.

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

Gebe ich vertical-align:middle zu Bild und nichts ändern!

Dank

InformationsquelleAutor der Frage Mosijava | 2012-05-09

  1. 10

    Entfernen Sie zuerst float. Schreiben wie dieses:

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

    InformationsquelleAutor der Antwort sandeep

  2. 5

    Hinzufügen line-height (gleich wie Bild Höhe):

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

    Siehe Beispiel.

    InformationsquelleAutor der Antwort ScottS

  3. 1

    Können Sie manuell ändern als auch

    <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

    InformationsquelleAutor der Antwort huMpty duMpty

  4. 1

    Einen <span> ist ein inline-element ist, versuchen Sie display:block auf die Spanne, geben Sie die gleiche Höhe wie die Bild und einer Zeile Höhe zu entsprechen. Schweben Sie sowohl Links-als auch. Das sollte funktionieren

    InformationsquelleAutor der Antwort atmd

  5. 0

    Können Sie das folgende tun: 

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

    InformationsquelleAutor der Antwort Franz Fahrenkrog Petermann

Schreibe einen Kommentar