Css ile yatay ve dikey ortalama

16 Mart 2016 1 dk okuma süresi 77 okunma

Css ile birçok ortalama metodu var. Position, table ..vs. Bana göre bunların en etkilisi ve en basiti display: table kullanmak. Çünkü yüksekliği değişken olan elementlerde sorunsuz çalışıyor.

Css'te vertical-align metodu vardır fakat bu tek başına kullanıldığında istenilen sonucu vermez. Bu nedenle bir üst ve alt olarak 2 div kullanıyoruz. Üst div yani parent display:table; özelliğini alıken alt div yani child display: table-cell; özelliğini alır. Bu noktada da child için vertical-align: middle; özelliği devreye girer. Aşağıdaki örnekte nasıl kullanıldığını görebilirsiniz. Hemen altındaki cssdeck linkinden hem çalışan halini hem de görsel olarak görebilirsiniz.

<div class="parent">
    <div class="child">Css ile yatay ve dikey ortalama</div>
</div>

<style type="text/css">
    .parent {display: table; height: 100px; width:400px; background-color:#efefef; }
    .child { display: table-cell; vertical-align: middle; text-align:center; }
    child {display: inline-block; }
</style>

Canlı örneğine şu linkten bakabilirsiniz. http://cssdeck.com/labs/xjowtwdu

Yazılarıma abone olmak ister misiniz?
Spam yapılmaz, sadece bildirim amaçlıdır. İstediğiniz zaman abonelikten çıkabilirsiniz.
İlginizi çekebilecek diğer yazılar.
jQuery ile tüm tarayıcılarda input select option'larını sağlıklı şekilde gizleyip göstermeye yarayan kod parçası.