Zvislé zarovnanie textu vedľa obrázka?

Prečo nefunguje vertical-align: middle? A predsa vertical-align: top funguje.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
sodimel
Edited question 7 august 2019 в 9:23
Programovanie
css vertical-alignment
28 január 2009 в 9:01
44 zobrazenia
Riešenie

V tomto prípade je to vlastne celkom jednoduché: použite na obrázok vertikálne zarovnanie. Keďže je to všetko v jednom riadku, zarovnať chcete naozaj obrázok, nie text.


<div>

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

Testované vo FF3.

Teraz môžete pre tento typ rozloženia použiť flexbox.

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

    <span style="">Works.</span>
</div>
patelarpan
Edited answer 26 apríl 2018 в 12:58
Komentáre (23)

Aby to fungovalo, musíte nastaviť line-height na výšku divu

Josh Crozier
Edited answer 17 október 2013 в 9:40
Komentáre (2)

Pravdepodobne chcete toto:

<div>

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

Ako už navrhli ostatní, skúste vertical-align na obrázku:

<div>

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

CSS nie je'otravné. Len si nečítate dokumentáciu. ;P

Komentáre (3)