Orta hizalama: CSS mizanpajı

Sayfa düzeni yapmak için genellikle gerekli olduğundaCSS yolunda merkez hizalama: örneğin, ana bloğu ortalayın. Bu problemi çözmek için, her biri er ya da geç, herhangi bir dizici tarafından kullanılması gereken birkaç seçenek vardır.

Metni merkeze hizala

Genellikle dekoratif amaçlar için sormanız gerekirmerkezdeki metin hizalaması, bu durumda CSS, düzenleme süresini azaltabilir. Önceden, bu HTML öznitelikleri kullanılarak yapıldı, ancak şimdi standart metnin stil sayfaları kullanılarak hizalanmasını gerektiriyor. Dış kenar boşluklarını değiştirmeniz gereken blokların aksine, merkezdeki CSS metin hizalaması tek bir satır kullanılarak yapılır:

• metin hizalama: orta;

Bu özellik devralınır ve ebeveynden geçer.Tüm torunları için. Yalnızca metni değil diğer öğeleri de etkiler. Bunu yapmak için, küçük harf (örneğin, yayılma alanı) veya küçük harf (ekran: blok özelliği ayarlanmış olan tüm bloklar) olmalıdır. İkinci seçenek, öğenin genişliğini ve yüksekliğini değiştirmenize, girintiyi daha esnek bir şekilde ayarlamanıza olanak tanır.

Genellikle sayfalarda hizalama etiketin kendisine atfedilir. Bu derhal kodu geçersiz kılar çünkü W3C align niteliğini eski hale getirmiştir. Bir sayfada kullanılması tavsiye edilmez.

Merkez Hizalama

Divin hizalamasını merkezde ayarlamanız gerekiyorsa, CSSoldukça uygun bir yol sunabilir: dış kenar boşluğu girintileri kullanma. Girinti hem blok elemanlarına hem de satır bloğuna ayarlanabilir. Özellik değeri, 0 (dikey girinti) ve otomatik (otomatik yatay girinti) değerlerini almalıdır:

• marj: 0 otomatik;

Şimdi tam olarak bu seçenek kesinlikle tanınırGeçerli. Girintiyi kullanmak, görüntünün ortasındaki hizalamasını ayarlamanıza da olanak sağlar: CSS marj özelliği, sayfada bir öğenin konumlandırılmasıyla ilgili birçok sorunu çözmenize olanak sağlar.

Sol veya Sağ Blok Hizalama

Bazen bir CSS yolunda merkez uyumu değildirgerekli, ancak iki bloğu yan yana koymanız gerekir: biri sol kenardan, diğeri sağdan. Bunu yapmak için, üç değerden birini alabilen bir float özelliği vardır: sola, sağa veya hiçbiri. Yan yana yerleştirilmesi gereken iki blok olduğunu varsayalım. O zaman kod şöyle olacak:

• .left {float: left;}
• .right {float: sağ}

Ayrıca, ilk iki bloğun altına yerleştirilmesi gereken (örneğin, altbilgi) üçüncü bir blok varsa, clear özelliğini kaydetmesi gerekir:

• .left {float: left;}
• .right {float: sağ}
• altbilgi {clear: both}

Gerçek şu ki, sol ve sağ sınıfları engelliyor.Genel akıştan çekilmek, yani diğer tüm elemanlar hizalanmış elemanların varlığını göz ardı eder. Açık: her iki özellik de altbilginin veya başka bir bloğun akıştan düşen öğeleri görmesini sağlar ve hem solda hem de sağda yüzmeyi yasaklar. Bu nedenle, örneğimizde altbilgi aşağı kayacaktır.

Dikey hizalama

Sormanın yeterli olmadığı zamanlar var.CSS yollarında merkez hizalaması, yine de alt bloğun dikey konumunu değiştirmeniz gerekir. Herhangi bir satır içi veya satır içi blok elemanı, ana öğenin ortasında veya herhangi bir yerde bulunan üst veya alt kenara basılabilir. Çoğu zaman, bloğun merkezde hizalanması gerekir, bunun için dikey-hizalama özelliği kullanılır. Biri diğerine iç içe geçmiş iki blok olduğunu varsayalım. Bu durumda, iç blok bir satır blok elemanıdır (ekran: satır içi blok). Alt bloğu dikey olarak hizalamak gerekir:

• üst hizalama - .child {vertical-align: top};
• merkez hizalaması - .child {vertical-align: middle};
• alt hizalama - .child {vertical-align: bottom};

Metin hizalama veya dikey hizalama blok öğelerini etkilemez.

Hizalanmış bloklarla olası problemler

Bazen bir div'i CSS yolunda merkezlemekküçük sorunlara neden olabilir. Örneğin, float kullanırken: Diyelim ki üç blok var: .first, .second ve .third. İkinci ve üçüncü bloklar ilk sırada. İkinci sınıfa sahip bir öğe sola hizalanır ve son blok sağa hizalanır. Seviyelendirmeden sonra, her ikisi de akıştan düştü. Ana eleman bir yüksekliğe sahip değilse (örneğin, 30em), o zaman alt blokların yüksekliği boyunca uzanmayı durduracaktır. Bu hatayı önlemek için, bir "boşluk bırakıcı" - .second ve .third gören özel bir blok kullanın. CSS kodu:

• .second {float: left}
• .third {float: sağ}
• .clearfix {height: 0; temizle: ikisi de;}

Genellikle sahte sınıf kullanılır:bundan sonra, sözde bir ayırıcı oluşturarak blokları tekrar yerleştirmenize de izin verir (örn. sınıf kabındaki div örneğinde .first içinde bulunur ve .left ve .right içerir):

• .left {float: left}
• .right {float: sağ}
• .container: after {content: ""; ekran: masa; temizle: ikisi de;}

Her ne kadar çeşitli varyasyonlar olsa da, yukarıdaki seçenekler en yaygın olanıdır. Deneme yoluyla sözde örnekler oluşturmanın her zaman en kolay ve en uygun yolunu bulabilirsiniz.

Sıklıkla karşılaşılan başka bir sorundizgiler, - satır bloğu öğelerinin hizalanması. Her birinin ardından, otomatik olarak bir boşluk eklenir. Olumsuz bir girinti verilen marj özelliği, bununla başa çıkmak için yardımcı olur. Çok daha az kullanılan başka yollar da var: örneğin yazı tipi boyutunu sıfırlama. Bu durumda, font boyutu: 0, ana öğenin özelliklerinde belirtilir. Metin blokların içine yerleştirilmişse, istenen yazı tipi boyutu zaten satır içi blok öğelerinin özelliklerinde döndürülür. Örneğin, yazı tipi boyutu: 1em. Yöntem her zaman uygun değildir, bu nedenle, girintili seçenek çok daha sık kullanılır.

Blokların hizalanması, güzel ve işlevsel sayfalar oluşturmanıza olanak tanır: bu, genel düzenin düzeni ve çevrimiçi mağazalardaki malların konumu ve bir kartvizit sitesinde fotoğraflardır.