CSS ile Dikey Ortalama

admin - 15 Aralık 2013 - 2 dk okunma süresi
ABONE OL:  

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.



Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Siteyi kullanmaya devam ederek çerezlerin kullanılmasını kabul etmiş olursunuz. daha fazla bilgi

Bu web sitesindeki çerez ayarları, size mümkün olan en iyi tarama deneyimini sunmak için "çerezlere izin ver" olarak ayarlanmıştır. Bu web sitesini çerez ayarlarınızı değiştirmeden kullanmaya devam ederseniz veya aşağıdaki "Kabul Et" i tıklarsanız, bunu kabul etmiş olursunuz.

Kapat