CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

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:

   .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:

   .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:

   .right
   {
      float: right;

      width: 300px;

      background-color:#b0e0e6;
   }
   

Kod çalıştığında 300 piksellik bir kutu sağa yaslanmış olacaktır.

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014