Metin ve resmi dikey olarak ortada hizalamak

Aşağıdaki gibi bir html bloğu ile çalıştığımızı düşünelim. Bir resim var ve yanında da bir metin:

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

Bu metni resmin yanında ortalanmış şekilde hizalamak istiyoruz. Ancak aşağıdaki CSS istediğimiz sonucu vermiyor:

span{
  vertical-align: middle;
}

Peki neden?

vertical-align

Aslında, bu durumda çözüm oldukça basit: resme dikey hizalama uygulayın. Her şey tek satırda olduğu için, aslında hizalamak istediğiniz şey resim, metin değil.

<!-- "vertical-align:middle" stilini span'dan img'a taşıdık -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
  <span style="">Works.</span>
</div>

flexbox

Bir diğer yöntem flexbox:

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

Flexbox’ın nasıl çalıştığı ile ilgili daha fazla bilgi için flexbox: temel bilgiler makalemize göz atmanızı tavsiye ederim.