Merhaba arkadaşlar.. Bu CSS dersimizde de CSS Align olarak birkaç bölüme ayıracağım Yüzey alanı parametresini daha önce gördüğümüz CSS margin özelliği ile birlikte kullanıp, backgorund  – color özelliklerini göstereceğim.

CSS içerisinde bazı özellikler yatay elemanları hizalamak için kullanılır. Align bunlardan biridir.

Blok Elemanlarını Hizalama

Blok elemanlarından kastımız sayfa boyunca ilerleyen ve Default ayarlarında herhangi bir kısıtlama ya da hizalama kullanmayan elemanlardır.Bunlara örnek verecek olursak;

• <h1>
• <p>
• <div>

gibi elamanlardır. Text align (yazı hizalama) özelliği için CSS Yazı başlığımızı inceleyebilirsiniz.

Bu bölümde birkaç CSS özelliğini kullanarak elemanları hizalamayı göstereceğim

Margin Özelliğini Kullanarak Orta Hizalama

Blok elemanları sağ ve sol margin özelliğini kullanarak yatay hizalama kullanılabilir.

margin:auto özelliği Eğer !DOCTYPE bilgisi yoksa İnternet Explorer’da çalışmaz.

Ayarları margin:auto içerisine gömüp, belirlediğimiz alana farklı değerler de atayabiliriz. Ufak bir örnek verelim ne dersiniz;

.center
 {
 margin-left:auto;
 margin-right:auto;
 width:70%;
 background-color:#b0e0e6;
 }

Yukarıda center sınıfına ait bölgeyi sayfanın ortasında yatay boşluğun %70 ini kullanarak oluşturduk.

Hizalama genişlik %100 olduğu zaman bir anlam oluşturmayacaktır.

Position Özelliğini Kullanarak sağ ve sol Hizalama

Position absolute özelliği ile hizalama yöntemi kullanılır.

.sag
 {
 position:absolute;
 right:0px;
 width:300px;
 background-color:#b0e0e6;
 }

Yukarıda sag sınıfını bir paragraf elemanı ile birlikte kullandığımızda paragrafın sap tarafa dayalı olarak oluşturduk.

Crossbrowser Tarayıcı Uyumluluğu

margin, paddin ve position özelliklerini kullanırken belki deneme yaptığımız tarayıca gözümüze güzel görünsede sayfamız, farklı tarayıcılarda farklı görünümler oluşabilir.

Bir de internet explorer derdimiz mevcut. Diyelim ki biz bir id’nin position değerini belirledik ve !DOCTYPE bilgilendirmesini girmedik. Bu defa internet explorer 17px değerinde bir margin (boşluk değeri) bırakacaktır. !DOCTYPE bilgisi verip aşağıdaki yazım şeklini kullanırsak hergangi bir boşluk değeri oluşmayacaktır;

body
 {
 margin:0;
 padding:0;
 }
 .container
 {
 position:relative;
 width:100%;
 }
 .right
 {
 position:absolute;
 right:0px;
 width:300px;
 background-color:#b0e0e6;
 }

Float özelliğini kullanarak sağ ve sol Hizalama

Float sağ ya da sol özelliğini kullanarak aşağıdaki gibi hizalama yapılabilir;

.right
 {
 float:right;
 width:300px;
 background-color:#b0e0e6;
 }

Buda float kullanılarak yaptığımız bir hizalama şekliydi. Yukarıda dediğim gibi birçok şekilde hizalama (align) sistemi  yazılabilir.. Float için de aşağıdaki gibi tarayıcı uyumu oluşturulabilir;

body
 {
 margin:0;
 padding:0;
 }
 .right
 {
 float:right;
 width:300px;
 background-color:#b0e0e6;
 }