Css ile yatay ve dikey ortalama
16 Mart 2016
1 dk okuma süresi
331 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
css
css yatay ve dikey ortalama
css vertical horizontal align
css ile dikey ve yatay hizalama nasıl yapılır
Yazılarıma abone olmak ister misiniz?
İlginizi çekebilecek diğer yazılar.