CSS ile Ekranın Tam Ortası

CSS ile Ekranın Ortasına Obje Yerleştirme

Web tasarımında çok sık karşımıza çıkan sayfayı ortalama sorunu CSS ile bile çözülememekteydi.

Browserların çoğu versiyonuyla uyumlu bu CSS kodu sayesinde  ortalama problemi ortadan kalkıyor. Özellikle uyumluluk sağlanmak istenen browserlara bakalım : Safari, IOS, Android, WebKit Görüntüleyicileri, Firefox, IE10, Chrome 21+, Opera 12.1, Firefox 22+,

ÖRNEĞİ GÖRÜNTÜLE

Başlayalım

Ben örneği basit bir HTML dosyası üzerinde kendi logomuzu yayınlayarak hazırladım. Kodlara geçelim ;

CSS Kodları


html {height:100%;}
body {
height:100%;

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center; -moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center; -moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

HTML Kodları 

<img src="http://www.adobewordpress.com/wp-content/uploads/2012/10/footer_logo.png">

Notlar

Bu konuya önce değinip popüler browserlara uyumlu bir kod dizimi hazırlamıştım. İlgili başlık aşağıda ;

Divleri Ortalamak



  • harika oldu mükemmel bir çalışma ELLERİNİZE sağlık iyi çalışmalar…