Text neben einem Bild vertikal ausrichten?

Warum funktioniert vertical-align: middle nicht? Und doch funktioniert "vertikal ausrichten: oben" wirklich.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
sodimel
Bearbeitete Frage 7. August 2019 в 9:23
Programmierung
css vertical-alignment
28. Januar 2009 в 9:01
21 Aufrufe
Lösung

Eigentlich ist es in diesem Fall ganz einfach: Wenden Sie die vertikale Ausrichtung auf das Bild an. Da alles in einer Zeile steht, ist es wirklich das Bild, das Sie ausrichten wollen, nicht der Text.


<div>

  <span style="">Works.</span>
</div>

Getestet in FF3.

Jetzt können Sie Flexbox für diese Art von Layout verwenden.

.box {
   display: flex;
   align-items:center;
}
<div class="box">

    <span style="">Works.</span>
</div>
patelarpan
Bearbeitete Antwort 26. April 2018 в 12:58
Kommentare (23)

Weil Sie die "line-height" auf die Höhe des Divs setzen müssen, damit dies funktioniert

Josh Crozier
Bearbeitete Antwort 17. Oktober 2013 в 9:40
Kommentare (2)

Sie wollen wahrscheinlich das hier:

<div>

   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Wie bereits von anderen vorgeschlagen, versuchen Sie es mit "Vertical-align" für das Bild:

<div>

   <span>Didn't work.</span>
</div>

CSS ist nicht lästig. Sie lesen nur nicht die Dokumentation. ;P

Kommentare (3)