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.