CSS Hizalama (align)
Kutu Özellikli Elementlerin Hizalanması
Daha önceki derslerimizde bazı HTML elementlerinin kutu bazılarının satır içi olduğundan söz etmiştik (bak.
CSS Display).
Kutu özellikli nesnelerde hizayı ayarlamak için
text-align kullanılabilir.
Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.
Margin Kullanarak Ortalamak
Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri
auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani
width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:
CSS Kodu
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.
Position Kullanarak Sağa ve Sola Yaslamak
Normal akıştan farklı olacak bir
position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa ya da sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:
CSS Kodu
.center
{
position: absolute;
right; 0px;
width: 500px;
background-color:#b0e0e6;
}
Sağdan 0 piksel boşluk bırakılacağını
right: 0px; ile belirtmiş olduk.
Float Kullanarak Sağa ve Sola Yaslamak
Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:
CSS Kodu
.right
{
float: right;
width: 300px;
background-color:#b0e0e6;
}
Kod çalıştığında 300 piksellik bir kutu sağa yaslanmış olacaktır.