CSS ile Dikey Ortalama

Ekleyen:

CSS tasarımcıları için büyük sorunların belki de başında gelir CSS ile Dikey Ortalama. Nette bir sürü çözüm bulabilirsiniz ama bazen tümü yetersiz kalabilir.

Vertical-align ile dikey ortalama yapabilsede değişken yükseklikte bu kod işe yaramıyor. Ayrıca yazdığımız kodun her tarayıcı ile uyumlu olarak kullanmamız gerekir.

Peki nasıl yapılır? sorusunun cevabı aşağıda..

Üst nesnemize, yani kapsayan tablomuza display: table kodunu veriyoruz. Daha sonra dikey olarak ortalanacak nesneye display: table-cell ve vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştiriyoruz.

Çalışan Kodumuz

[code lang=”html”]</pre>
<html>
<head>

<title>CSS ile Dikey Ortalama</title>

<style type="text/css">

.kutu {
width: 650px;
height: 300px;
background: green;
color: #FFF;
display: table
}

.kutu p {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3em;
}

</style>

</head>

<body>

<div class="kutu">

<p>Pilsiz.net</p>

</div>

</body>

</html>

[/code]

Bu kodumuzda p nesnesini kutu div’ine ortaladık. Eğer istenirse aynı ortalama div nesnesine göre de gerçekleştirilebilir.

Yorum Yap

E-posta hesabınız yayımlanmayacak.

Okunası Yazılar