Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama yapabilsekte değişken yükseklikte bu işe yaramıyor.. Hal böyle olunca işe yaraması ve her tarayıcıda çalışabilmesi için neler yapmamız gerektiğini kısaca inceleyelim.
Nasıl Yapacağız?
Kapsayıcı nesnemize display: table verip o nesneyi tablo yapacağız.. Daha sonra dikey olarak ortalayacağımız nesneye ise display: table-cell deyip vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştireceğiz.. Bunu yapmadığımız taktirde vertical-align görevini doğru olarak yerine getiremiyor.
Hadi Yapalım
<!DOCTYPE>
<html>
<head>
<title>css dikey ortalama</title>
<meta charset="utf-8" />
<style type="text/css">
.box {
width: 500px;
height: 300px;
background: #111;
color: #fff;
display: table
}
.box p {
display: table-cell;
vertical-align: middle;
text-align: center
}
</style>
</head>
<body>
<div class="box">
<p>
burası ortalanacak..
</p>
</div>
</body>
</html>Evet artık modern tarayıcılarda dikey ortalama işlemimizi gerçekleştirdik.. Ancak bu şekilde IE8+ üzerinde çalışacaktır.. IE7- ve alt sürümleri için ise (eğer uyumlu hale getirmek istiyorsanız) html yapımızda değişiklik css kodlarımızda ilave yapmamız gerekecek..
IE7 ve alt sürümleri için fix
CSS özelliklerinin IE7 ve alt sürümlerde çalışması için özellik başına #işareti getirilmesi yeterlidir.. # yerine _ işareti getirilir ise IE6 ve alt sürümleri için geçerli bir işlem olur. Bizim sorunumuz IE7 ve alt sürümleri için olduğundan # işareti koyacağız.. Öncelikle html yapımızı şöyle değiştireceğiz;
<div class="box"> <p> <span> burası ortalanacak.. </span> </p> </div>
Gördüğünüz gibi fazladan bir span nesnesi ekledik.. Şimdi geldik css kodlarımızda ki eklemelere;
.box {
width: 500px;
height: 300px;
background: #111;
color: #fff;
display: table;
#position: relative
}
.box p {
display: table-cell;
vertical-align: middle;
text-align: center;
#position: absolute;
#top: 50%;
#width: 100%
}
.box p span {
#position: relative;
#top: -50%
}
İlk olarak kapsayıcı nesneye position: relative verdik ki içerisindeki nesnelere absolute uyguladığımızda dışarıya kaçmasın. Daha sonra nesne içindeki ilk nesnemize (yani paragraf nesnemize) pozisyon değerleri uyguladık. Ve onun içindeki span nesnesine de tekrar pozisyon değerleri uygulayıp doğru bir sonuç aldık.. Ekstra olarak pozisyon özelliği uyguladığımız için paragraf nesnesi genişliğini içeriğe göre şekillendireceğinden yatay ortalama geçersiz kalıyordu.. Bunu da genişliğini 100% vererek çözdük.