Sitede düzenleme yaparken en çok kullandığımız CSS kodlardan bazıları hizalama kodları olur. Bunları genelde additional.css şablonuna gerekli yerlere iliştiririz. Bu konuda sizlere bu kodların nasıl kullanıldığı hakkında bilgi sunacağım.

Kutu Özellikli Elementlerin Hizalanması

Kutu özellikli nesnelerde hizayı ayarlamak için text-align kullanılabilir.

Fakat bu konuda farklı yollardan nasıl hizalama yapılır buna değineceğim.

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:

PHP- Kodu:

[Kodları Görebilmek İçin Üye Olmanız Gerekmektedir. Üye Olmak İçin Tıklayın...]
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:

PHP- Kodu:

[Kodları Görebilmek İçin Üye Olmanız Gerekmektedir. Üye Olmak İçin Tıklayın...]
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:
PHP- Kodu:

[Kodları Görebilmek İçin Üye Olmanız Gerekmektedir. Üye Olmak İçin Tıklayın...]
Kod çalıştığında 300 piksellik bir kutu sağa yaslanmış olacaktır.