Bir resmin yanındaki metni dikey olarak hizalama?

Neden vertical-align: middle çalışmıyor? Yine de vertical-align: top çalışıyor.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
sodimel
Edited question 2019ööp23öö9 Ağustos 2019 в 9:23
Programlama
css vertical-alignment
2009ösp1ös21 Ocak 2009 в 9:01
37 görünümler
Çözüm

Aslında, bu durumda oldukça basit: görüntüye dikey hizalama uygulayın. Hepsi tek bir satırda olduğu için, hizalanmasını istediğiniz metin değil, gerçekten görüntüdür.


<div>

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

FF3'te test edildi.

Artık bu tür bir düzen için flexbox kullanabilirsiniz.

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

    <span style="">Works.</span>
</div>
patelarpan
Edited answer 2018ösp58ös12 Nisan 2018 в 12:58
Yorumlar (23)

Çünkü bunun çalışması için line-height değerini div'in yüksekliğine ayarlamanız gerekir

Josh Crozier
Edited answer 2013ösp40ös21 Ekim 2013 в 9:40
Yorumlar (2)

Muhtemelen bunu istiyorsundur:

<div>

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

Diğerlerinin de önerdiği gibi, resim üzerinde dikey hizalama yöntemini deneyin:

<div>

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

CSS rahatsız edici değildir. Sadece belgeleri okumuyorsunuz ;P

Yorumlar (3)