Merkezli: CSS-düzen

sayfasının düzeni bir merkezli CSS-önünü açmak için çoğu zaman gerekli olduğunda: örneğin, ana üniteyi merkezi. er ya da geç her kodlayıcı kullanmak zorunda olacak, her biri bu soruna çeşitli çözümler vardır.

ortalamak için Metin hizalama

Genellikle dekoratif amaçlı Eğer koydurtmasını süresini azaltmak için, bu durumda merkezli metin, CSS ayarlamak istiyorum. Daha önce bu HTML özelliklerini kullanılarak yapıldı, ama artık standart stil sayfası ile metin hizalamak için gerekli. Eğer tek bir satır ile yapılır ortada metnin CSS hizada dış dolgu değiştirmek istediğiniz bloğun aksine:

• text-align: center;

Bu özellik kalıtsal ve tüm çocuklara ebeveynden geçirilir. Bu metin aynı zamanda diğer elemanlarına da etkiler. Bu amaçla, bunlar küçük harf olmalıdır (örneğin, yayılma) veya satırdaki blok (ekran özelliği belirttiğiniz herhangi blokları: blok). İkinci seçenek, genişlik ve elemanının yüksekliği, girinti daha esnek konfigürasyonunu değiştirmek sağlar.

sayfalar genellikle kendi kendine etiketi niteliğini hizalayın. Bu hemen W3C align niteliği eskimiş kabul beri, kod geçersiz kılar. Bir sayfada kullanmakta önerilmez.

ortalanmış blok

Eğer ortada div hizalamasını ayarlamak istiyorsanız, CSS oldukça rahat bir şekilde sunabilir: Harici dolgu marjı kullanımını. Dolgu blok elemanlarının ve hat blok olarak belirtilebilir. Svoysva 0 (dikey dolgu) ve otomatik (yatay olarak otomatik girinti) olmalıdır:

• marjı: 0 otomatik;

Şimdi bu seçenek kesinlikle geçerli olarak kabul edilmektedir. CSS marjlı özellik bize sayfadaki konumlandırma elemanı ile ilişkili birçok sorunu çözmek için izin verir: Harici dolgu kullanmak da merkezin hizalamasını ayarlamak için izin verir.

bloğun sol veya sağ kenarı hizalanması

Bazen CSS yönlü merkezinin hizalama gerektirmez, ancak sonraki iki blok, sol taraftan bir ve diğer koymak gerekir - sağdan. Bunun için üç değerden birini alabilir şamandıra özelliği vardır: sağ veya hiçbiri, sol. Diyelim ki yan yana yerleştirilmelidir iki blok var diyelim. Ardından aşağıdaki şekilde kod şudur:

• .left {yüzer: sol;}
• .right {float: sağ}

İlk iki blok (örneğin, alt bilgi) altında bulunan gereken bir üçüncü blok, var ise, o zaman açık özelliği kayıt için gerekli olan:

• .left {yüzer: sol;}
• .right {float: sağ}
• altbilgi {clear: both}

toplam akışın dışına sağ ve sol düşme sınıfları ile blokları, yani tüm diğer unsurları hizalanmış unsurların varlığını gözardı gerçeği. Mülkiyet clear: both akış hücrelerinden çöktürülmüş altbilgi bloğunu veya başka herhangi bir görünür izin verir ve sol ve sağ hem wrap (şamandıra) yasaklamaktadır. Bu nedenle, bizim örneğimizde, altbilgi aşağıya doğru yer değiştirir.

dikey hizalama

yetmez CSS-yollarından merkezinin hizalamasını ayarlamak için durum vardır, ayrıca çocuk bloğunun dikey konumunu değiştirmek gerekir. Herhangi bir hat veya sıra blok elemanı üst elemanın ortasında bulunan veya keyfi bir konumda olması, üst ya da alt kenarına doğru bastırılabilir. Çoğu zaman bloğun merkezinin uyum gerektiren, bu vertical-align özelliği kullanılıyor. Diğer içinde yuvalanmış iki blok, bir tane var olduğunu varsayalım. satır blok elemanı (: sıralı blok gösterim) - bu iç ünite olarak. Dikey blok çocuğu hizalamak için gereklidir:

• Üst sınır hizalanması - .child {dikey hizalama: En};
• merkezli - .child {dikey hizalama: orta};
• alt kenarı hizalanması - .child {dikey hizalama: alt};

blok elemanları anda ses text-align veya vertical-align geçerli değildir.

hizalanmış birimlerle Olası sorunlar

Bazen küçük bir sorun neden olabilir CSS yönlü merkezini hizalamak div. bir şamandıra Örneğin,: .first, .second ve .Üçüncü: örneğin, üç blok vardır. İkinci ve üçüncü bloklar ilk içinde uzanmaktadır. Bir sınıf ile bir element ikinci sola hizalanmış ve son blok - sağda. hizalama sonra, iki akımdan düştü. üst öğe yüksekliğini tanımlı değilse (örneğin 30em), bu yan birimlerinin yüksekliğini germek sona erecek. .second ve .Üçüncü görür özel bir birim, - Bu hatayı önlemek için, "ara parça" kullanırlar. CSS-kodu:

• .second {yüzer: sol}
• .Üçüncü {float: sağ}
• .clearfix {yükseklik: 0; açık: Her iki;}

sözde sık kullanılan: sonra da psevdorasporki oluşturarak yerine blokları dönmek olanak sağlayan, (sınıf div örnekte kap içinde yer alan ve bir .first .left ve .right içerir):

• .left {şamandıra: sol}
• .right {float: sağ}
• .container: {içeriğine sonra: ''; görüntü: tablo; açık: Her iki;}

Yukarıdaki seçenekler - En yaygın bazı değişiklikler göstermekle beraber. Her zaman deneyleri ile psevdorasporki oluşturmanın en kolay ve en uygun şekilde bulabilirsiniz.

Bir diğer sorun sık düzeni karşılaştı - hat-blok elemanlarının uyum. Her birinden sonra bir boşluk otomatik olarak eklenir. Kulp negatif girinti ile tanımlanır marj özelliği, yardımcı olur. Daha az sıklıkla kullanılan örneğin sıfırlanır başka yollar vardır yazı tipi boyutunu. Bu durumda, ana elementin özelliklerinin font-size kaydeder: 0. metin blok içinde yer alan, satır-blok elemanlarının özellikler arzu yazı tipi boyutu döndü. Örneğin, yazı tipi boyutu: 1em. yöntem her zaman uygun değil, bu yüzden çok daha sık dış kenar boşlukları versiyonu kullanılır.

genel düzenini ve düzeni ve dükkanlarda mal yerini ve fotoğrafları küçük bulunduğu alana: Blokları hizalama güzel ve işlevsel sayfaları oluşturmak için izin verir.