CSS ile Dikey Ortalama
Benimde çok fazla sıkıntısını çektiğim elementlerin dikey de ortalama işi için bir çok teori ve yöntem ileri sürülmektedir. Ben bunların en makbul olanını bulup uygulamak istedim ve bu makalede bunu sizlerle paylaşıyorum. Aslında bulunan çözümler beni tam olarak tatmin etmiyor desem yeridir. Aşağıda anlatılacak yöntem istediğimiz sonucu elde etmek için yeterli olacaktır.
CSS ile dikeyde ortalama yapmak için vertical-align özelliği var ise de bu özellik HTML’deki tablo gibi çalışmaz. Yani istediğimiz sonuca bizi ulaştırmaz.
CSS vertical-align özelliği belirsiz yükseklikte(içeriği değişebilen) kutularda işe yaramaz.
IE için Keystone’un sunduğu çözüm; mutlak konumlandırma uygulanmış kapsayıcı elemente yüksekliğinin yarısı kadar top(veya margin-top) değeri uygulamaktır. Bu kapsayıcı elementin içindeki elementi dikeyde ortalayacaktır.
Mozilla, Opera, Safari gibi standart web tarayıcıları için çözüm çok farklıdır. Üstteki katmana display:table tanımı yapılır. İçteki elementlere de display:table-cell özelliği uygulanır. Ayrıca dikeyde ortalanmak istenen elemente vertical-align tanımı yaparak element dikeyde ortalanır. (Bu özelliği IE kavrayamamaktadır. Kavramamakta da ısrarlıdır. IE 7 display:table ve türevlerini desteklemiyor.)
İki çözüm vardır altçizgi(_) ve (#) ile yapılan bir çözüm vardır. IE(IE7 hariç) (_) ile tanımlanan kodu görmediği için yorumlamayacaktır. # ile başlayan kodları tüm IE versiyonları(IE7 dahil) görmeyecektir. Bu işaretlerin kullanım amacı tüm versiyonlarda aynı sonucu elde etmektir.
Aşağıdaki kod IE5+,FF, Opera 7, Konqueror 3.0.3 altında standart ve garip mod da çalışıyor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS ile dikey ortalama</title>
<style>
#Kapsul{
display: table;
height: 400px;
#position: relative;
overflow: hidden;
border: 1px solid green;
}
#IcerikAlani{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#alan{
#position: relative;
#top: -50%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="Kapsul">
<div id="IcerikAlani">
<div id="alan">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
</body>
</html>
Örneği görmek için tıklayınız.
[...] da içeriği sayfaya dikey olarak ortalamak mümkün ve Fatih Hayrioğlu’nun bu konuda, CSS ile Dikey Ortalama, bir paylaşımıda mevcut, bu paylaşımı ve paylaşımda belirtilen kaynakları inceleyerek [...]
Teşekkürler çok güzel ve yararlı bir yazı olmuş.. Ek olarak;
http://www.turkcescript.com/kodlama/css-kodlama/c...
adresinde de bir kaç farklı yoldan bahsedilmiş.
[...] da içeriği sayfaya dikey olarak ortalamak mümkün ve Fatih Hayrioğlu’nun bu konuda, CSS ile Dikey Ortalama, bir paylaşımıda mevcut, bu paylaşımı ve paylaşımda belirtilen kaynakları inceleyerek [...]
[...] da içeriği sayfaya dikey olarak ortalamak mümkün ve Fatih Hayrioğlu’nun bu konuda, CSS ile Dikey Ortalama, bir paylaşımıda mevcut, bu paylaşımı ve paylaşımda belirtilen kaynakları inceleyerek [...]
Tek bir elemanı ortalamayı yapıyordum da, bir kaç tane eleman varsa onu nasıl ortalayabilirim? Ve tabii ki bu elemanların sayısı veritabanına bağlıysa… Php ile yaklaşık olarak ortalayabiliyorum; ancak her zaman düzgün bir sonuç alamıyorum. Özellikle eleman sayısı artınca gariplikler ortaya çıkabiliyor.
Ortalayacağınız tüm elemanları kapsayan bir tane katman açıp o katmanı ortalasanız olmuyormu?
http://www.mycelly.com/css_templates/css_template...
adresini de bugün gördüm,
ortalanacak elemana:
position: absolute;
left: 50%;
top: 50%
değerlerini girince aynı sonucu alabiliyoruz.
peki position:absolute bize sorun çıkarmaz mı?
ben bu tekniği kendim açık kaynaklı tarayıcılardan birinin kodlarını incelerken keşfetmiştim. (safari ya da opera olcak sanırım)
yazı için teşekkürler. peki hem yatay hem dikey ortalamak için ne yapılmalı
yatayda ortalamka içinde elemana genişlik ve margin:0 auto; tanımını yapmanız yeterli.
yatayda ortalamka içinde elemana genişlik ve margin:0 auto; tanımını yapmanız yeterli.
[...] CSS ile Dikey Ortalama / Fatih Hayrio