Merkez hizalaması: CSS düzeni

İnternet

Bir sayfa oluşturduğunuzda, genellikleCSS yolunda orta hizalama: örneğin, ana birimi ortalayın. Bu sorunu çözmek için çeşitli yollar vardır, her biri herhangi bir düzen tasarımcısı tarafından kullanılmalıdır.

Metni merkeze hizala

Genellikle dekoratif amaçlı, belirtmeniz gerekirMerkezdeki metin hizalaması, bu durumda CSS düzeni zamanını azaltmanıza olanak tanır. Önceden, bu HTML öznitelikleri kullanılarak yapıldı, ancak şimdi standart stil sayfalarını kullanarak metni hizalamayı gerektirir. Harici girintileri değiştirmek istediğiniz bloklardan farklı olarak, CSS'de metin, bir satır kullanarak merkezde ortalanır:

metin hizalaması: merkez;

Bu özellik, devralındı ve ebeveyninden geçirilditüm torunları. Sadece metni değil, diğer öğeleri de etkiler. Bunu yapmak için, küçük harf (örneğin, açıklık) veya satır bloğu (ekranın: block özelliğinin ayarlandığı tüm bloklar) olmalıdır. İkinci seçenek ayrıca, elemanın genişliğini ve yüksekliğini değiştirmenize izin verir, girintileri ayarlamak için daha esnektir.

Genellikle sayfalarda hizalama, etiketin kendisine atfedilir. Bu, kodu geçersiz kılar, çünkü W3C hizalama özelliğini eskimiş olarak kabul etmiştir. Bu sayfada kullanılması önerilmez.

Bloğu merkeze hizalayın

Div, CSS merkez hizalamasını ayarlamanız gerekiyorsaoldukça uygun bir yol sunabilir: dış marj marjının kullanımı. Girintiler, hem blok öğelerine hem de satır-blok olanlara atanabilir. Özelliğin değeri 0 (dikey) ve otomatik (yatay girinti) olmalıdır:

kenar boşluğu: 0 otomatik;

Şimdi bu seçenek kesinlikle tanınıyorGeçerli. 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ğu sola veya sağa hizalayın

Bazen CSS tarzında ortalamak değilBu gereklidir, ancak yakın iki blok koymak gerekir: biri soldan, diğeri - sağdan. Bunun için, üç değerden birini alabilen bir float özelliği vardır: sol, sağ veya yok. Diyelim ki yan yana yerleştirilmesi gereken iki blok var. Sonra kod şöyle olacak:

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

Ayrıca, ilk iki bloğun (örneğin, altbilgi) altında yer alması gereken üçüncü bir blok varsa, açık değeri ayarlamanız gerekir:

.left {float: left;}
.right {float: sağ}
altbilgi {açık}

Mesele, sol ve sağ sınıfları olan bloklardır.Genel akıştan düşmek, yani diğer tüm unsurlar hizalanmış elemanların varlığını görmezden gelir. Net: her iki özellik de, bir altbilgi veya herhangi bir diğer bloğun akıntıdan düşürülmüş elemanları görmesini sağlar ve hem soldan hem de sağdan yüzmeyi engeller. Bu nedenle, örneğimizde, altbilgi aşağı doğru hareket edecektir.

Dikey hizalama

Sormanın yeterli olmadığı zamanlar var.CSS yöntemleriyle merkezdeki hizalama, aynı zamanda çocuk bloğunun dikey konumunu değiştirmek için de gereklidir. Herhangi bir satır veya satır bloğu elemanı üst öğenin ortasına veya keyfi bir yerde olmak için üst veya alt kenara basılabilir. Çoğu zaman, dikey hizalama özelliğini kullanarak bloğu merkeze hizalamanız gerekir. Biri diğerinde yuvalanmış iki blok olduğunu varsayalım. İç blok, bir satır blok elemanıdır (ekran: satır içi blok). Çocuk bloğunu dikey olarak hizalamanız gerekir:

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

Öğeleri ne metin hizalama ne de dikey hizalama işlevi.

Hizalanmış bloklarla ilgili problemler

Bazen div'u CSS yönteminin merkezi etrafında hizalamaküçük problemlere neden olabilir. Örneğin, float kullanırken: Örneğin, üç blok vardır: .first, .second ve .third. İkinci ve üçüncü bloklar ilk sırada yer alır. İkinci sınıf bir eleman sola dayalı ve son blok sağa hizalanmış. Dengelemeden sonra, her ikisi de akımdan çıktı. Ebeveynin bir yüksekliği yoksa (örneğin, 30em), artık çocuk bloklarının yüksekliği boyunca gerilmez. Bu hatayı önlemek için, "spacer" ı kullanın - .second ve .third adlı özel bir blok. CSS-kodu:

.second {float: left}
.third {float: sağ}
.clearfix {yükseklik: 0; açık: her ikisi;}

Sahte bir sınıf sıklıkla kullanılır:sonra, aynı zamanda, sahte bir dağılım oluşturarak blokları yere geri döndürmeye de izin verir (sınıf kabındaki div içindeki örnekte .first içinde yer alır ve .left ve .right içerir):

.left {float: left}
.right {float: sağ}
.container: sonrası {content: ""; ekran: tablo; açık: her ikisi;}

Birçok seçenek olmasına rağmen, yukarıdaki seçenekler en yaygın olanlardır. Deneme yoluyla sözde dağınıklığı oluşturmak için her zaman en basit ve kullanışlı yolu bulabilirsiniz.

Sık sık başka bir sorun, - satır blok elemanlarının hizalanması. Her birinden sonra otomatik olarak bir boşluk eklenir. Negatif bir girintiyle belirlenen marj özelliği, bunun üstesinden gelmeye yardımcı olur. Daha az sıklıkla kullanılan başka yollar vardır: örneğin, yazı tipi boyutunu sıfırlama. Bu durumda, yazı tipi boyutu: 0 ana öğenin özelliklerinde ayarlanır. Blokların içinde metin varsa, gerekli yazı tipi boyutu satır bloğu öğelerinin özelliklerine döndürülür. Örneğin, yazı tipi boyutu: 1em. Yöntem her zaman uygun değildir, bu yüzden harici girintilere sahip sürüm daha sık kullanılır.

Hizalama blokları, güzel ve işlevsel sayfalar oluşturmanızı sağlar: Bu, genel yerleşimin düzenidir ve çevrimiçi mağazalarda malların yeri ve kartvizit sitesinde fotoğraflar.