fit merkezi hizalama CSS yol yapmak için genellikle gereklidir.Er ya da geç her kodlayıcı kullanmak zorunda olacak, her biri bu soruna çeşitli çözümler vardır.
Hizala metin Bu durumda metin merkezinin hizalama, CSS ayarlamak istediğiniz sıklıkla dekoratif amaçlı
merkezli, dayatma süresini azaltır.Daha önce, bu artık standart stil sayfaları kullanarak hizalama metin gerektirir HTML nitelikleri kullanılarak yapılmıştır.
- text-align: ortada CSS metin hizalama ile size dış kenar boşluklarını değiştirmek istediğiniz bloğun, aksine tek bir satır ile yapılır merkezi;
Bu tesis miras ve tüm çocukların ebeveynden geçirilir.Bu metin aynı zamanda diğer elemanlara sadece etkiler.Bunu yapmak için, onlar veya hat blok (: Blok özelliği ekran ayarlar herhangi bloklar) (örneğin, açıklık için) daha düşük durumda olması gerekir.İkinci seçenek ayrıca girinti daha esnek yapılandırma genişliğini ve yüksekliğini değiştirmenizi sağlar.
Genellikle sayfalar etiketi kendisine niteliği aynı hizaya getirin.Bu hemen W3C olarak geçersiz kod align niteliği eskimiş kabul yapar.Kullanımı sayfasında tavsiye edilmez.Merkezi
div merkezinin hizasını belirtmek isterseniz de
hizalama bloğu, CSS oldukça kolay bir yol sunabilir: Dış girinti marj kullanımını.Dolgu blok seviyesinden elemanlar ve hat-bloğu bir şekilde ayarlanabilir. - margin: Svoysva değer 0 (dikey girintili) ve otomatik (otomatik yatay girintiler) ayarlanmalıdır 0 auto;
Şimdi bu seçenek kesinlikle geçerli olarak kabul edilmektedir.CSS-margin özelliği bize sayfadaki konumlandırma elemanı ile ilgili birçok sorunları çözmek için izin verir: Harici dolgu kullanmak da merkezin uyum belirlemenizi sağlar.Sol veya sağ kenarına
üzerinde
Hizala blok Bazen merkez hizalama CSS yönlü gerekli değildir, ancak sol tarafında ve diğer gelen diğerine iki ünite koymak için gerekli olan - sağ taraftan.Bu özellik için üç değerden birini alabilir bir şamandıra vardır: Sağ, veya hiçbiri bıraktı.Diyelim ki bir araya koymak gerekir iki ünite var diyelim.Ardından kod olacaktır: - .left {float: left;}
- .right {float: sağ}
ilk iki blok (örn, altbilgi) altına alınmalıdır üçüncü ünite, o varsa
- .left: net özelliğini kaydetmeniz gerekir {float: left;}
- .right {float: sağ} {clear: both}
- footer
gerçeği sol sınıfları ve toplam dışarı doğru düşüş ile bloklardiğer tüm elemanları olarak hizalanmış elemanlar varlığını yok, diğer bir deyişle, akar.Özellik net: Her iki altbilgi veya başka bir ünite izin veren akış elemanları düştü ve sol ve sağ hem şal (float) yasaklamaktadır görmek için.Bu nedenle, bizim örneğimizde, altbilgi aşağı kayacak.
Dikey hizalama
yetersiz set merkez hizalama CSS-yollar, hala çocuk bloğunun dikey konumunu değiştirmeniz gerekir durumlar vardır.Herhangi bir hat veya çizgi-blok elemanı ebeveyn elemanın ortasında bulunan, üst veya alt kenarına doğru bastırdı, ya da herhangi bir yerde olabilir yapılabilir.Daha sık merkezinde kutunun uyum gerektirir, bu özellik dikey-align kullanılır.Iki ünite, içerisinde başka bir olduğunu varsayalım.İç ünite - hat-blok elemanı (display: inline-block).Üst sınırın üzerinde
- hizalama - .child {vertical-align:: top} Birim dikey çocuğu hizalamak için gereklidir;
- merkez hizalama - .child {vertical-align: orta};Alt ucunda
- hizalama - .child {vertical-align: alt};Blok seviyesinden elemanlar veya text-align veya geçerli değildir vertical-align üzerinde
.
hizalanmış birimler
ile Olası sorunlar Bazen küçük sorunlara neden olabilir CSS yol ortasına hizalamak div.Örneğin, şamandıra kullanarak: .first, .second ve .Üçüncü: örneğin, üç blok vardır.İkinci ve üçüncü blok, ilk içindedir.Sağdaki - ikinci hizalanmış sol ve son bloğun bir sınıf ile bir eleman.Hizalama sonra iki derenin düştü.Ebeveyn yüksekliği tanımlı değilse (örn 30em), artık yan birimlerinin yüksekliğini uzatmak olacaktır..second Ve .Üçüncü gördüğü özel bir birim, - Bu hatayı önlemek için, "ayırıcı" kullanın.CSS kodu:
- .second {float: left}
- .Üçüncü {float: sağ}
- .clearfix {height: 0;net: her iki;}
sık kullanılan sözde: sonra da sağlayan bir psevdorasporki oluşturarak yerine blok dönmek (kabın bir sınıf ile bir div bu örnekte .first içinde bulunur ve .left ve .right içerir):
- .sol {float: left}
- .right {float: sağ}
- .container: {content sonra: '';display: table;clear: both;} seçenekler üzerinde
- En sık, bazı farklılıklar olmasına rağmen.Her zaman deneylerde psevdorasporki oluşturmak için en kolay ve en uygun yolu bulabilirsiniz.
Bir diğer sorun sık karşılaşılan düzen - hat-blok elemanlarının uyum.Bunların her biri otomatik olarak eklenir alan sonra.Negatif girinti tarafından tanımlanan bu özellik yardımı marjı ile başa çıkmak için.Yazı tipi boyutunu sıfırlama, örneğin daha az sıklıkla kullanılan diğer yöntemler vardır.Bu durumda, ebeveyn reçete font-size özellikleri: 0.Metin blok içinde yer, satır blok elemanlarının özellikleri istenilen boyuta döndü.Örneğin, font-size: 1em.Yöntem çok daha sık dış marjları ile seçeneği kullanıldığında, her zaman uygun değildir.
hizalama bloğu güzel ve işlevsel sayfa düzeni oluşturmak için izin verir ve küçük bir internet sitesinde genel düzen ve dükkanlarda mal konumu ve resimleri.
