CSS ile Dikey Ortalama

 

üksekliği, eklenen içerik ile orantılı olarak uzayıp kısalan nesnelerin içine ekleyeceğimiz bir neyneyi dikey ortalamak isteyebiliriz. Bu şekildeki bir durumla karşılaştığımızda ana nesnemize yani ortalanacak nesnenin bulunduğu nesneye display:table değerliğini atayıp tablo özelliklerimi kullanabilmem için nesneyi tablo yapıyorum. Şimdi ortalayacağımız nesneye display: table-cell ve vertical-align:middle özelliklerini atıyoruz. Böylelikle nesneyeDikey Ortalama yapmış oluyoruz. Şimdi bir örnek nesneye yukarıdaki anlattığım şekilde ‘Dikey Ortalama‘ yapalım.

 

 

[xml]

<style type="text/css">

#kutu{

width:350px;

height:200px;

background-color:gray;

color:white;

display: table

}

 

#kutu span{

text-align: center;

display: table-cell;

vertical-align: middle;

}

</style>

 

<div id="kutu">

<span>

Ortadaki Yazı

</span>

</div>

[/xml]