Dün akşam Foxy Turkey’in yan menüsüne 2 adet reklam alanı açtım. Gerekli alanı oluştururken daha önce hiç denemediğim fakat oldukça yaygın olan bir şekil vermek istedim. Belirli ölçülerde 1 adet kutu ve bu kutunun tam ortasında duran, iletişim sayfasına yönlendiren bir bağlantı (link) olmalıydı.

Tam ortasından kastım yatay ve dikey ortalamaktı.

Bir kaç denememim ardından başarıya ulaştım fakat en sağlıklısı olup olmadığından şüpheliyim. Öncelikle sizleri örnek sayfasına yönlendireyim. Örnek sayfasında yer alan CSS kodlarından bir şey anlamayan arkadaşlar makalemi okumaya devam edebilirler.

CSS’de Dikey ortalamak

CSS ile bağlantıyı enlemesine ortalamak son derece basit. “text-align: center” tanımıyla bu işlem kolayca yapılabiliyor. (Elbette bu işlemin kolaylığı bilene)

Boylamasına ortalamayı ise “vertical-align: middle” ile yapmayı planlıyordum fakat olmadı. Sadece tablolar için geçerli olduğunu bu denemem sonucunda anladım ve başka bir yöntem deneyerek buldum. “line-height” tanımı satır aralıklarını belirlemenize yarar fakat hazırlamış olduğunuz kutu ile bu değeri aynı yaparsanız, tek satırlık yazınız kutu içerisinde dikey ortalanacaktır.
Örnek vermek gerekirse:

HTML

<div id="kalip">
<h2>Örnek</h2>
<div class="deneme1">Makaleye dönüş!</div>
<div class="deneme2">Makaleye dönüş!</div>
</div>

CSS

#kalip {
height:450px;
width:350px;
background:#dedede;
border:1px solid #cdcdcd;
float:left;
margin:35px 0px 0px 100px;
}

.deneme1{
height:160px;
width:160px;
background:#444;
border:1px solid #fff;
text-decoration:underline;
line-height:160px;
color:#fff;
margin: 5px;
text-align:center;
float:left;
}

.deneme2{
height:160px;
width:160px;
background:#444;
border:1px solid #fff;
text-decoration:underline;
line-height:160px;
color:#fff;
margin: 5px;
text-align:center;
float:right;
}

Yukarıdaki örneklerden görebileceğiniz gibi, kutuların uzunluğu yani “height” değeri 160px. Yazıyı yatay ortalayan tanım “text-align:center”, dikey ortalayan ise “line-height:160px”. Eğer kutumuzun “height” değeri 500px olsaydı, “line-height” değeri 500px olmalıydı.

Sonuç olarak

Böyle ufak bir ipucu için bile uzun bir makale yazdığımı düşünüyorum. Umarım işinize yarar. “line-height” kullanımında dikkat edilmesi gereken tek nokta, kullanacağınız yazının veya bağlantının tek satır uzunluğunda olmasıdır.

“line-height” ve “vertical-align” kullandığım örnek sayfasına buradan ulaşabilirsiniz.

Şansınıza 5 yazı!

PHP Matematiksel Fonksiyonları

PHP Değişkenler

Mustafa Kemal Atatürk

A+ Certification 2nd Edition For Dummies

Google Wave davetiyesi!

• Bunu Tweet'leyin!
• Bunu Digg'leyin!
• Bunu del.icio.us 'da paylaşın
• Bunu Friendfeed'de paylaşın