CSS ile genellikle yaşanan sorunlardan bir tanesidir dikey ortalama. Yatay ortalama (horizontal align) yapmak istediğimizde margin:0 auto; veya text-align:center kullanabiliyoruz. Ancak dikey ortalama yapmak istediğimizde margin işimizi görmüyor.
Dikey ortalama yapmak için display:table, display:table-cell ve veritical-align:middle kodlarını kullanacağız.
Örneğimize geçecek olursak bir tane dış ve bir tane de iç div var. Amacımız iç div’de bulunan yazıyı dış divimizin dikey ve yatay olarak ortasına getirmek olacak.
Öncelikle aşağıdaki gibi HTML kodlarımı yazıyorum;
[html]<div class="mainDiv"><div class="childDiv">
Bu alan ortalanacaktir :)
</div>
</div>[/html]
Html kodlarımı ekledikten sonra css e geçebilirim, öncelikle dış div’e css özelliklerini veriyorum;
[css].mainDiv{
/* Dış div’e genişlik ve yükseklik olarak 300 değeri ve div’in gözükmesi için border veriyorum. */
height:300px;
width:300px;
border: 2px #333 dashed;
/* Dikkat: İç div’i dikey ortalayabilmek için dış div’e display:table özelliğini veriyorum. */
display:table;
}[/css]
Dış div’e ait css kodlarını yazdıktan sonra iç div’in css kodlarına geçebilirim;
[css].childDiv{
/* Bir üst div’i dikkate alması için display:table özelliğini veriyorum */
/* ve üst div’e göre ortalaması için vertical-align:middle kullanıyorum. */
display:table-cell;
vertical-align:middle;
/* Div içerisindeki yazıyı yatay olarak ortalamak için text-align:center özelliğini kullanıyorum. */
text-align:center;
}[/css]
Allah razı olsun. sabahtan beri geberiyorum kendim yapacağım diye. sağ olasın kardeş.
Birçok kez denedim kendi yöntemlerimle farklı şekillerde yazıyı ortalayabildim ama bu yöntemler çok uzun kodlama gerektirdi hiç table mantığı ile vertical ve horizantal ortalama yapılabileceği aklımın ucundan bile geçmezdi hem kısa kodlama hemde tam istenilen sonucu bu şekilde yapabildim teşekkür ederim sinan iyiki varsın .:)
çok güzel bir anlatım emeğine sağlık