CSS ile Dikey Ortalama (Vertical Align)

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.

css_dikey_ortalama

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;

<div class="mainDiv">
<div class="childDiv">
Bu alan ortalanacaktir :)
</div>
</div>

Html kodlarımı ekledikten sonra css e geçebilirim, öncelikle dış div’e css özelliklerini veriyorum;

.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;
}

Dış div’e ait css kodlarını yazdıktan sonra iç div’in css kodlarına geçebilirim;

.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;
}

 

  1 Comment

  1. Bülen   •  

    Allah razı olsun. sabahtan beri geberiyorum kendim yapacağım diye. sağ olasın kardeş.

Bir Cevap Yazın

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