Bu maalesef hala yıllardan beri arayüz insanlarını uğraştırabilen bir konuydu; içinde yazı olan bir html öğesini bulunduğu alan içerisinde dikey olarak ortalamak. Aslında artık pek karşılaşıldığını sanmıyorum çünkü en büyük sorun Internet Explorer ın eski versiyonlarının her durumda bir kıllık yapması ya da sitenin diğer stilleriyle uyumlu olması gereken bir yapının olmamasıydı. Ancak bu engeller de diğer tarayıcıların ve bootstrap lerin yaygınlaşmasıyla filan ile pek ortada gözükmüyor. Yine de belki hala vertical align (dikey hizalama) sorunu yaşayan olabilir diye, bildiğim birkaç tane çözümden bahsetmek istiyorum.
Öncelikle eğer dıştaki öğenin boyutunu bilmiyorsanız ama içine absolute pozisyonlu bir öğe yerleştirebiliyorsanız, şunu deniyebilirsiniz:
1. HTML:
<p>Binlerce savaşı kazanmak için savaşmak yerine kendinizi fethetmeyi deneyin. Zafer, sizsiniz.</p>
1. CSS:
p {
width: 200px;
height: 200px;
padding: 10px;
font-size:24px;
text-align:center;
background-color: orange;position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Stil verdiğim kısımda boyut ve renk belirledikten sonra başlayan, "position, top..margin" kısmı bu paragrafın dikey ve yatay olarak ortalı durmasını sağlayan kısım. Dışındaki öğe ile oynamazsanız ya da dışındaki öğenin stiline "position: relative" eklerseniz sorunsuz çalışması gerekir. Tabii ki bu çözüm koyduğunuz içeriğin yüksekliği belirli ise yapılacak bir uygulamadır.
Yine yüksekliği belli olan ve tek satır olan bir içerik için şunu deniyebilirsiniz, burda da tek yaptığım satırların kullanım yüksekliği html öğesinin yüksekliği ile aynı yapmak:
2. HTML:
<p>Uyanmak!</p>
2. CSS:
div {
height: 100px;
line-height: 100px;
text-align: center;
background-color: orange;
}
Eğer aynı yöntemi çok satırlı bir içerikde kullanmak isterseniz içiçe iki html öğesi taktiğine geçmelisiniz:
3. HTML:
<div><p>Binlerce savaşı kazanmak için savaşmak yerine kendinizi fethetmeyi deneyin. Zafer, sizsiniz.</p></div>
3. CSS:
div {
height: 200px;
line-height: 200px;
text-align: center;
background-color: orange;
}
p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Daha hızlı işinizi görebilecek ve benim de yıllarca kullandığım eski tablo yapısını simüle etme yöntemini de kullanabilirsiniz, bunun için de yine içiçe iki öğeye ihtiyacınız var. Tablo yapısında vertical-align stilini kullanabiliyoruz:
4. HTML:
<div><p>Binlerce savaşı kazanmak için savaşmak yerine kendinizi fethetmeyi deneyin. Zafer, sizsiniz.</p></div>
4. CSS:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
background-color: orange;
}
p {
display: table-cell;
vertical-align: middle;
}
Aynı tekniği sadece dıştaki div e stil vererek de şu şekilde deneyebilirsiniz:
4. Alternatif CSS:
div {
width: 200px;
height: 100px;
background-color: orange
margin: 0px;
padding: 0px;
text-align: center;
display: table-cell;
vertical-align:middle;
}
Tabii ki bu stilleri kullanırken div, p diye eleman kullansanız bile css te direk bu şekilde türün tamamına stil vermemenizi tavsiye ederim, ben sadece burada rahat gözükmesi için bu şekilde yaptım. Html öğelerine class ya da id verip stilleri bunlar ile atamak her zaman daha iyi bir pratiktir.
Buradaki yöntemler dışında da kullanabileceğiniz teknikler var; CSS3 teki flex özelliği, işinizi hızlandıran javascript kütüphaneleri gibi ancak, buradaki yaklaşımları öğrenmeniz başka sorunlarla karşılaştığınızda da yardımcı olabilecek fikirler üretmenizi sağlayabilir.