Markazli: CSS-layout

sahifa tartibi bir markazli CSS-yo'l qilish ko'pincha zarur bo'lsa: masalan, asosiy birligi markaziy uchun. ertami-kechmi har qanday coder foydalanish kerak bo'ladi har biri, bu muammoni bir necha echimlar bor.

markaziy matnni yib

Ko'pincha yillik maqsadlar uchun siz solishga sabab vaqtini kamaytirish uchun, bu holatda markazi matnni, CSS o'rnatish istayman. Avvalroq, bu HTML-sifatlari yordamida bajarilgan, lekin hozir standart uslublar jadvallari bilan matn moslashtirishdan zarur. Agar bitta chiziq bilan amalga oshiriladi o'rtasida matni CSS hizalanmada tashqi padding o'zgartirish kerakli uchun blokda farqli o'laroq:

• matn-align: center;

Bu xususiyat meros va barcha bolalar uchun ota-ona dan uzatiladi. Bu matn, balki boshqa elementlariga nafaqat ta'sir qiladi. Shu maqsadda, ular kichik harflar lozim (masalan, span) yoki Qator-blok (displey xususiyati har qanday bloklari: bloklarga). Ikkinchi variant ham siz kengligi va element balandligi, chuqurchaga yanada moslashuvchan konfiguratsiyani o'zgartirish imkonini beradi.

sahifalar ko'pincha o'ziga teg atribut tekislang. Bu darhol W3C align xususiyati eski tan beri, kodi noto'g'ri qiladi. bir sahifada, uni ishlatish tavsiya etilmaydi.

markazli blok

Agar o'rtada div hizalamasını o'rnatish bo'lsangiz, CSS juda qulay yo'l taqdim etishi mumkin: tashqi padding chekka bo'shlig'ini foydalanish. Padding blok elementlar va yo'l-blok sifatida belgilangan bo'lishi mumkin. Svoysva qiymati 0 (vertikal padding), va auto (gorizontal avtomatik belgi) bo'lishi kerak:

• margin: 0 auto;

Endi bu variant juda asosli deb e'tirof etiladi. CSS-margin mulk AQSh sahifada joylashishni element bilan bog'liq ko'pgina muammolarni hal etish imkonini beradi: tashqi padding foydalanish, shuningdek, siz markazi hizalamasını belgilash uchun imkon beradi.

blok chap yoki o'ng tomonining Alignment

Ba'zan CSS tomonlama markazi hizalamasını talab qilmaydi, lekin keyingi ikki bloklari, chap tomonida birini va boshqa qo'yish zarur, - o'ng kelgan. Buning uchun uch qadriyatlar birini qabul qilishi mumkin float mulk, bor: o'ng yoki hech kim, qoldirgan. Siz yonma-yon joylashtirilgan bo'lishi kerak, ikki bloklari bor deylik. quyidagicha So'ngra kod:

• .left {float: chapga;}
• Guvohlik {float: o'ng}

birinchi ikki blok (masalan, piyoda) ostida joylashgan bo'lishi kerak, uchinchi blok, bor bo'lsa, u ochiq-oydin xususiyati ro'yxatdan o'tish zarur:

• .left {float: chapga;}
• Guvohlik {float: o'ng}
• futbol {aniq: ikkala}

umumiy oqimi chiqib chap va o'ng kuzda sinflar bilan bloklari, ya'ni, boshqa barcha elementlar hizalanan elementlar borligini e'tiborsiz haqiqatdir. Mulk aniq: ikkala oqim xujayralari tubining futbol blok yoki boshqa har qanday ko'rinadigan beradi va chap va o'ng, ham doka (float) taqiqlaydi. Shuning uchun, bizning misolda, futbol pastga siljiydi.

vertikal hizalamasını

etarli emas CSS-yo'llar markazida hizalamasını belgilash uchun holatlar bor, siz ham bola blokda vertikal o'rnini o'zgartirish kerak. Har qanday yo'l yoki Qator-blok element ota element o'rtasida joylashgan yoki o'zboshimchalik joyda bo'lishi, yuqori yoki pastki chetiga bosdi mumkin. Eng tez-tez blokda markazida hizalamasını talab, u vertikal-align atribut foydalanadi. Boshqa bilan birga ichki ikki blok, bir bor deylik. Qator-blok element (: inline-blok ko'rsatish) - bu ichki birlik ichida. Bu vertikal blok bolani moslashtirishdan zarur:

• Yuqori chegara hizalama - .Bolalarning {vertikal-align: eng};
• markazli - .Bolalarning {vertikal-align: o'rta};
• pastki chetiga hizalama - .Bolalarning {vertikal-align: pastki};

blok elementlar At audio matn-align yoki vertikal-align amal qilmaydi.

tenglashtirilgan birliklari bilan Yuzaga kelgan muammolar

Ba'zan bir oz muammo olib kelishi mumkin CSS-yo'l markazi tekislang DIV. bir float foydalanganda Masalan,: .Birinchidan, .Ikkinchi va .Uchinchi: masalan, uch bloklari bor. Ikkinchi va uchinchi bloklari birinchi yolg'on. bir sinf, bir element ikkinchi tark hizalanmış va oxirgi blok - o'ng tomonda. tekislang so'ng ikki daryo tushib ketdi. ota-element balandligi belgilanmagan bo'lsa, (masalan, 30em), u yordamchi birliklar balandligi uzatmoqchi qoladi. .Ikkinchi va .Uchinchi ko'rgan maxsus birligidan, - bu xato oldini olish uchun, "spacer" foydalaning. CSS-kod:

• .Ikkinchi {float: chap}
• .Uchinchi {float: o'ng}
• .clearfix {balandligi: 0; aniq: ikkala;}

psevdo tez-tez ishlatiladi: keyin, shuningdek, psevdorasporki yaratib joyiga bloklari qaytishiga ruxsat (sinf bilan div misol konteyner ichida yotadi va bir .Birinchi .left va Guvohlik o'z ichiga oladi):

• .left {float: chap}
• Guvohlik {float: o'ng}
• .konteyner: {mundarijaga keyin: " '; ko'rsatish: jadvali; aniq: ikkala;}

Yuqorida imkoniyatlari - eng keng tarqalgan, ayrim tafovutlar bor-da. Siz har doim tajribalar bilan psevdorasporki yaratish uchun eng oson va eng qulay yo'l topishingiz mumkin.

Yana bir muammo tez-tez tartibi duch - layn-blok elementlar muvofiq. ularning har biri keyin bir kosmik avtomatik ravishda qo'shiladi. Band u salbiy kesmada tomonidan belgilangan marjasi mulkini, yordam beradi. , Kam tez-tez ishlatiladigan masalan, qayta o'rnatish boshqa yo'llari ham bor shrift hajmini. Bu holda, ota-element xususiyatlari font-size ro'yxatga: 0. matnning blok ichida joylashgan bo'lsa, yo'l-blok elementlarning xususiyatlari Kerakli shrift hajmi qaytdi. Misol uchun, font-size: 1em. usuli har doim qulay emas, shuning uchun u ko'proq tez-tez tashqi chekkasiga bilan versiyasini ishlatiladi.

Bosh rejasini va tartibi, va do'konlarda tovarlar o'rnini va rasmlar kichik saytida: bloklari tenglashtirish go'zal va funktsional-sahifalarni yaratish imkonini beradi.