Css İle Hizalama İşlemleri

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

www.dijitalders.com

Öncelikle kendimize bir taşıyıcı belirliyoruz. Taşıyıcı nedir derseniz , resimdeki "container" taşıyıcıdır. Taşıyıcı bütün öğeleri içine alır. Yazacağımız her şey bunun içinde yer alır ve sayfayı hizalarken bunu kullanırız.

Sayfayı ortalamanın ilk yolu kodda göründüğü gibidir.

#container { width: 760px; margin: 0 auto; }

 
Css dosyanızda bu şekilde bir kullanım opera ve firefox gibi tarayıcılarda sorunsuz görünse de internet explorer'da sorun çıkartacaktır. Bütün tarayıcılarda ortalanmış sorunsuz bir görüntü elde etmek istiyorsak yapmamız gereken css dosyamızdaki body seçicisini şu şekilde düzenlemek.

body { text-align: center; }
 
 

Böylece sayfadaki her şey ortalanacaktır. Fakat bizim istediğimiz sadece taşıyıcının (container) ortalanması ve diğerleri nesnelerin(yazır, resim...) taşıyıcının içinde sola yaslanması. Kodumuza son halini verip bütünleştirirsek css dosyamız şöyle olmalıdır

body {text-align: center; }
#container {width: 760px; margin: 0 auto; text-align: left; }
  Artık tamamen ortalanmış bir sitemiz var

Divi ortalamak

margin:0 auto 0 auto;

 Divde dikey ortalama   

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle
}

   

<DIV class="container">
  <P>This small paragraph...
</DIV>

 

Resim Ortalamak   

margin:3px auto 3px auto; display:block;

 

 


Kaynak

 

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...