Mening "CSS-qazish" ishimni davom ettirgan holda, yana bitta dolzarb mavzuni qismlarga ajratish uchun yangi g'oya paydo bo'ldi, bu esa bloklarning kengligi bo'yicha bir tekis tekislash bilan bog'liq. Printsipial jihatdan, men allaqachon o'zimning blogimda o'zimning puxta izlanishlarimni joylashtirgan edim, lekin o'tgan ishim Xabr jamoatchiligiga juda yoqqanligi sababli, men ushbu maqolani qisqacha sharhlab berishga qaror qildim, shunda hech bir Xabr ruhi uni sog'inmaydi. Shunday qilib, Gagarin aytganidek: "Ketamiz".
Umuman olganda, tartibga solish vazifalarida, ba'zi bir ro'yxatni ekranning kengligi bo'yicha tekislash zarurati paydo bo'ladigan paytlar mavjud. Bunday holda, ushbu ro'yxat elementlari teng ravishda tekislanishi kerak, ularning haddan tashqari elementlarini idish chegaralariga bosib, ular orasidagi masofa bir xil bo'lishi kerak.
Rasmdan ko'rinib turibdiki, nuqtalar kenglik bo'yicha tekislanib, yon devorlarga tutashgan va o'zaro chegaralarni tenglashtirgan.
U qanday ishlaydi?
Asosan, biz matn bilan hizalanadigan narsani olishimiz kerak: justify matn bilan qanday ishlaydi. Bizning bloklarimizning xatti-harakatlari ushbu xususiyatdan foydalanib satrdagi so'zlarni tekislash natijalariga juda o'xshash bo'lgani uchun. O'ylaymanki, ko'pchilik allaqachon bu xususiyat nima ekanligini va uning taxminiy ishi haqida taxminiy tasavvurga ega.* Ushbu sharhda men butun algoritm bosqichlarini tahlilini joylashtirmadim, bu haqda maqolaning o'zida o'qishingiz mumkin. Asosiysi, mohiyatni tushunishingiz kerak.
Bizning vazifamiz
Bizning vazifamiz ushbu algoritm asosida echim yaratishdir. Qo'llash, taqlid qilish, almashtirish, har qanday narsani qilish, asosiysi, oxir-oqibat biz xohlagan narsani olishdir. Ya'ni - ketma-ket teng ravishda tekislangan elementlar, ularning yon tomonlari o'z chegaralariga bosilgan. Va, albatta, ushbu elementlar orasidagi masofalar (bo'shliqlar) har qanday konteyner kengligi uchun bir xil bo'lishi kerak.* Sizga zudlik bilan xabar bermoqchimanki, variantlar (ishlayotgan va unchalik emas) aslida 4 dona bo'lib chiqdi, bundan tashqari bir qator qiziqarli va foydali tahlil qilingan nuances ulkan maqola (mening uslubimda). Shuning uchun, bu erda men ulardan ba'zilarini qisqacha tavsiflab beraman :)
Variantlar 3
Ammo uchinchi variant allaqachon matnni tekislash algoritmining o'zida qurilgan: meva beradigan bloklarni oqlash va inline qilish, lekin unchalik emas. Birinchidan, men ro'yxatni qo'shimcha, qo'shimcha element bilan suyultirishim kerak edi, ikkinchidan, IE6-7 da biz topdik qiziqarli faktlarbu menga gapirishdan katta zavq bag'ishladi. Ushbu brauzerlarda ushbu qaror umuman ishlashdan bosh tortdi. Va menga kim yordam berganini taxmin qiling. To'g'ri, SelenIT2! Ammo u yolg'iz o'zi kelgani yo'q, lekin ajoyib g'oya bilan (u GreatRash ustaxonasidagi oddiy hamkasbimizdan ayyorlik bilan o'g'irlagan), men bundan shunchaki hayratda qoldim. Ma'lum bo'lishicha, qadim zamonlardan buyon bir nechta sehrli CSS3 xususiyatlari ushbu echimni o'zaro faoliyat brauzer echimiga aylantirishi va matnni hizalashi mumkin: bizning IE6-7 yoshdagi ishlarimizni oqlash.Barcha sir quyidagi kodning oxirgi qatorida tugadi:
ul (shrift: 14px Verdana, Jeneva, sans-serif; text-align: justify; / * ota-ona uchun null * / line-height: 0; font-size: 1px; / * 1px for Opera * / / * Cure for IE6 -7 * / matnni oqlash: gazeta;)
Matn bilan ko'rib turganingizdek: oqlash: gazeta; ul, bizning versiyamiz kross-brauzerga aylanadi. Buning sababi, matnni oqlash: gazeta mulki harflar va so'zlar orasidagi masofani ko'paytirish yoki kamaytirishga qaratilgan. MSDN bu narsa "Lotin alifbosi uchun moslashtirishning eng murakkab shakli" deb da'vo qilmoqda, ammo ushbu maqolada arab matnlari uchun ushbu xususiyat harflarning o'zlarini kengaytiradigan qo'shimcha mavjud.
Variantlar 4
Xo'sh, 4-variant IE6-7-da yangi muammolarni keltirib chiqaradigan qo'shimcha belgilarni ham pasaytirdi.
Matnni oqlashning asosiy sababi shundaki, gazeta faqat bizning harflarimizni (inline-block) kengaytirishga imkon beradi, ammo buyruq emas. Oddiy so'zlar bilan aytganda, u chiziqni qanday qilib cho'zishni xohlashini va matnni tekislashini aytadi: oqlash - bu tortishish kuchi. O'sha. text-align: justify chiziqni cho'zish uchun javobgardir, text-justify: gazeta esa ushbu cho'zilish qanday sodir bo'lishini belgilaydi.
3-variantni ko'rib chiqishda men SelenIT2 menga ikkita xususiyatni taklif qilganini aytdim, ulardan biri (matnni oqlash: gazeta) avvalgi versiyada bizga yordam berdi, ikkinchisi bu bilan bizga yordam berdi! Bundan tashqari, bu safar ular birlashdilar va ikki tomonlama kuch bilan so'nggi variantni engishga muvaffaq bo'lishdi.
ul (shrift: 14px Verdana, Jeneva, sans-serif; text-align: justify; / * ota-ona uchun null * / line-height: 0; font-size: 1px; / * 1px for Opera * / / * Cure for IE6 -7 * / text-justify: gazeta; kattalashtirish: 1; / * oxirgi qatorni qo'shish * / text-align-last: justify;)
Marhamat, xush kelibsiz! text-align-last - matnni tekislashni o'z ichiga olgan xususiyat: matnning oxirgi satrida algoritmni asoslash, agar unga xuddi shu matn align: justify qo'llanilsa. Oddiy qilib aytganda, biz odatdagi matnni tekislashni qo'llaganimizda: matnga asoslang, keyin buni ko'rgan holda, matn align-last birinchisiga uning yomon ishlayotganligini va endi u oxirgi satrda ishlashiga to'g'ri keladi.
Aytgancha, ushbu xususiyatlar ba'zi bir mulkiy emas, balki ko'rsatilgan (gazeta qiymati bundan mustasno, endi boshqacha nomlanadi). Shunday qilib, hech qanday mushukcha zarar ko'rmaydi) Va shuni ta'kidlashni istardimki, IE6-7 xatosi CSS3 bilan engib o'tilgan - buni yana kim ko'rgan? :)
Umuman olganda, sharhni yakunlar ekanman, shuni aytmoqchimanki, men haqiqatan ham munosib echimni topganimdan xursandman. Va shunchaki topibgina qolmay, balki hamma narsani tushunib oling va uni mutanosib brauzerlararo muvofiqlashtirishga olib boring, minimal kod sarflang va belgini chalg'itmang.
Agar qisqacha sharh Kimdir bu etarli emas deb o'yladi, keyin men ushbu (allaqachon katta) maqolani yaxshilab tahlil qilib o'qishni maslahat beraman. Ammo, men sizni ogohlantiraman! Maqola haqiqatan ham unchalik katta emas, shuning uchun o'qishni boshlashdan oldin sevimli kukilaringizni choy bilan to'ldirishingiz yaxshiroqdir :)
Teglar: Teglar qo'shish
Xayrli kun. Aleksey Gulyinin aloqada. Oxirgi maqolada biz uni tartibga keltirdik Matn bilan ishlash uchun HTML teglar ... Bu bilan shug'ullanish vaqti keldi matnni qanday tekislash kerak hTML-sahifa ... E'tibor bergan bo'lsangiz, avval yozganlaringiz barchasi brauzerning chap chetiga to'g'ri keladi va biz hech narsa qilmaymiz, bu asl qiymati. Tarkibni, masalan, markazga moslashtirish uchun nima qilish kerak? Mening esimga eskirgan yorliq keladi
Matnning chap tomoni
Markaziy matn
Sahifani brauzerda ochgandan so'ng, biz haqiqatan ham matn sahifada markazlashtirilganligini ko'ramiz.
Men sizning e'tiboringizni quyidagi fikrga qaratmoqchiman: agar teg bo'lsa, qaror qabul qilishingiz mumkin
Agar biz narsalarni o'ng tomonga joylashtirmoqchi bo'lsak, nima qilamiz? Keling, konteyner tushunchasini ko'rib chiqamiz
Element
Ushbu maqolada siz bilib oldingiz html sahifasidagi matnni tekislang.
Text-align CSS xususiyati matnni, shuningdek rasmlarni va boshqa elementlarni gorizontal tekislash uchun javobgardir. Mulk 4 ga teng mumkin bo'lgan variantlar hizalama.
CSS matn bilan hizalanadigan sintaksis
... matn bilan tekislash: markaz | oqlash | chap | o'ng | meros; ...
- markaz - maydon markaziga tekislash (masalan, maydonning kengligi 500 piksel, shuning uchun u 250 pikselli chiziqqa to'g'ri keladi)
- oqlash - matnni mintaqaning butun kengligi bo'ylab uzatadi
- chapga - chapga tekislash
- o'ng - o'ng tekislash
- meros - ajdod (ota-ona) qiymatini olish
Ushbu xususiyatlar ko'pincha bloklarda qo'llaniladi
Eslatma:
Vertikal tekislash xususiyati ham mavjud bo'lib, u vertikal tekislash uchun javobgardir.
HTML-dagi matnni qanday tekislash kerak
Misol # 1.
Matnni chap tomonga tekislash. Sukut bo'yicha amal qiladi.
Matnni chapga tekislang
Matnni chapga tekislang
Misol # 2. Matn va rasmlarni markazga tekislash
Matnni markazga tekislash. Ko'pincha maqolalarning sarlavhalari yoki markazda tasvirlarni namoyish qilish uchun ishlatiladi.
Matnni markazga tekislang
Sahifa quyidagilarga aylantiriladi
Matnni chapga tekislang
Misol # 3. Matnni o'ng tomonga tekislang
Matnni o'ng tomonga tekislang.
Matnni o'ng tomonga tekislang
Sahifa quyidagilarga aylantiriladi
Matnni o'ng tomonga tekislang
Misol № 4. Matnni butun maydon kengligi bo'yicha tekislang
Matnning to'liq kengligi. Ma'lum bo'lishicha, tekislash maydonda ham, o'ngda ham sodir bo'ladi. Brauzer avtomatik ravishda bo'sh joy qo'shadi.
Sahifa quyidagilarga aylantiriladi
Matnni butun maydon kengligi bo'yicha tekislang
Ba'zan matnni tekislash: oqlash; ishlamasligi mumkin. Bu meros va hatto brauzer harakati bilan bog'liq. Odatda ushbu parametrdan foydalanish tavsiya etilmaydi.
EslatmaText-align xususiyati o'rniga teg bilan yozilgan align atributidan ham foydalanishingiz mumkin. U turli teglar uchun ishlatilishi mumkin. Masalan:
Markazni tekislashMatnni butun maydon kengligi bo'yicha tekislang
... ...
Teglardagi farq
Ikkinchisi unga o'tishni amalga oshiradi yangi qator (vertikal plomba) va div bo'lmaydi.
Har bir maket dizaynerlari doimiy ravishda tarkibidagi bloklarni gorizontal yoki vertikal ravishda tekislash zarurati bilan duch keladi. Ushbu mavzu bo'yicha bir nechta yaxshi maqolalar mavjud, ammo ularning barchasi juda qiziqarli, ammo amaliy variantlarni taklif qiladi, shuning uchun siz asosiy narsani ta'kidlash uchun qo'shimcha vaqt sarflashingiz kerak. Ushbu ma'lumotni endi google-ga o'tkazmaslik uchun men uchun qulay bo'lgan shaklda topshirishga qaror qildim.
Bloklarni ma'lum o'lchamlarga moslashtirish
CSS-dan foydalanishning eng oson usuli ma'lum balandlik (vertikal tekislash uchun) yoki kenglik (gorizontal tekislash uchun) bo'lgan bloklarni tekislashdir.
To'ldirgich bilan tekislang
Ba'zan elementni markazlashtira olmaysiz, lekin unga "" bilan chegaralarni qo'shishingiz mumkin. to'ldirish".
Masalan, sizda 200x200px rasm bo'lsa va uni 240x300 blokda markazlashtirmoqchi bo'lsangiz, biz tashqi qutining balandligi va kengligini \u003d 200px qilib, yuqori va pastki qismiga 20 piksel, chap va o'ng tomoniga 50 piksel qo'shishimiz mumkin.
.example-wrapper1 (fon: # 535E73; kengligi: 200px; balandligi: 200px; to'ldirish: 20px 50px;)Mutlaqo joylashtirilgan qutilarni tekislash
Agar blok " pozitsiya: mutlaq", keyin u" position: nisbiy "bilan eng yaqin ota-onaga nisbatan joylashtirilishi mumkin. Buning uchun barcha xususiyatlar (" yuqori","to'g'ri","pastki","chap") ichki birlikka bir xil qiymatni belgilang, shuningdek" margin: auto ".
* Bir nuance bor: ichki blokning kengligi (balandligi) + chapning qiymati (o'ng, pastki, yuqori) ota-ona blokining o'lchamidan oshmasligi kerak. Chap (o'ng, pastki, yuqori) xususiyatlarni 0 (nol) ga o'rnatish xavfsizroq.
.example-wrapper2 (pozitsiya: nisbiy; balandlik: 250px; fon: url (space.jpg);) .cat-king (kenglik: 200px; balandlik: 200px; pozitsiya: mutlaq; yuqori: 0; chap: 0; pastki: 0; o'ng: 0; margin: auto; fon: url (king.png);)Landshaft tekislash
"Text-align: center" bilan tekislash
Blokda matnni tekislash uchun maxsus xususiyat mavjud " matn bilan tekislash". Qiymat o'rnatilganda" markaz"har bir matn satri gorizontal ravishda hizalanadi. Ko'p satrli matn uchun bu echim kamdan kam qo'llaniladi, ko'pincha bu parametr oraliqlarni, havolalarni yoki rasmlarni tekislash uchun topilishi mumkin.
Matnni hizalamak qachon ishlashini ko'rsatish uchun bir marta matn bilan kelishim kerak edi cSS yordami, lekin hech qanday qiziqarli narsa aqlga kelmadi. Avvaliga men bolalar bog'chasini biron bir joyga ko'chirishga qaror qildim, ammo bu maqolaning o'ziga xosligini buzishi mumkinligini va bizning aziz o'quvchilarimiz uni Google-da topa olmasligini esladim. Va keyin men ushbu xatboshini shu erda yozishga qaror qildim - axir gap u bilan emas, balki nuqta moslashtirishda.
.example-text (text-hizalanishi: center; padding: 10px; background: # FF90B8;)Ta'kidlash joizki, ushbu xususiyat nafaqat matn uchun, balki har qanday matn uchun ham ishlaydi ichki elementlar ("displey: inline").
Ammo bu matn chap tomonga to'g'ri keladi, lekin u o'rashga nisbatan markazda hizalanadigan blokda joylashgan.
.example-wrapper3 (text-align: center; background: # FF90B8;) .inline-text (display: inline-block; width: 40%; padding: 10px; text-align: left; background: # FFE Zagruzka;)Bloklarni chekkalarga tekislash
Kengligi ma'lum bo'lgan blok elementlari osongina gorizontal ravishda "margin-left: auto; margin-right: auto" ga o'rnatiladi. Odatda qisqartirilgan yozuv ishlatiladi: " margin: 0 avtomatik"(nol o'rniga har qanday qiymatdan foydalanish mumkin). Ammo bu usul vertikal tekislash uchun ishlamaydi.
.lama-o'rash (balandlik: 200px; fon: # F1BF88;) .lama1 (balandlik: 200px; kenglik: 200px; fon: url (lama.jpg); margin: 0 avtomatik;)Mumkin bo'lgan joylarda barcha bloklarni birlashtirishga arziydi (bu erda qat'iy yoki mutlaq joylashishni talab qilinmaydi) - bu eng mantiqiy va etarli. Garchi bu aniq ko'rinib tursa-da, ba'zida salbiy chegaralar bilan qo'rqinchli misollarni ko'rdim, shuning uchun aniqlik kiritishga qaror qildim.
Vertikal tekislash
Dan vertikal tekislash ko'p ko'proq muammolar - aftidan, bu CSS-da ko'rsatilmagan. Istalgan natijaga erishishning bir necha yo'li mavjud, ammo ularning barchasi unchalik yoqimli emas.
Chiziq balandligi xususiyati bilan moslashtirish
Agar blokda bitta satr bo'lsa, uni "" yordamida vertikal tekislashga erishishingiz mumkin. chiziq balandligi"va uni kerakli balandlikka o'rnatish. Ishonchliligi uchun" balandlik "ni o'rnatishga arziydi, uning qiymati" satr balandligi "qiymatiga teng bo'ladi, chunki ikkinchisi hamma brauzerlarda qo'llab-quvvatlanmaydi.
.example-wrapper4 (satr balandligi: 100px; rang: # DC09C0; fon: # E5DAE1; balandlik: 100px; matn bilan tekislash: markaz;)Bundan tashqari, bir nechta chiziqlar bilan bloklarni moslashtirishga erishish mumkin. Buning uchun siz qo'shimcha o'ram blokidan foydalanishingiz va unga chiziq balandligini o'rnatishingiz kerak bo'ladi. Ichki blok ko'p qatorli bo'lishi mumkin, ammo "inline" talab qilinadi. Unga "vertikal-tekislash: o'rtani" qo'llash kerak.
.example-wrapper5 (satr balandligi: 160px; balandligi: 160px; shriftning kattaligi: 0; fon: # FF9B00;) .ambel-o'rash5 .text1 (displey: inline-block; shrift hajmi: 14px; chiziq balandligi: 1.5; vertikal-tekislash: o'rta; fon: # FFFAF2; rang: # FF9B00; matn bilan tekislash: markaz;)Paket bloki "shrift hajmi: 0" o'rnatilgan bo'lishi kerak. Agar siz shrift hajmini nolga qo'ymagan bo'lsangiz, brauzer o'zidan bir nechta qo'shimcha piksel qo'shadi. Shuningdek, ichki blok uchun shrift o'lchamini va satr balandligini ko'rsatishingiz kerak bo'ladi, chunki bu xususiyatlar ota-onadan meros bo'lib o'tgan.
Jadvallarda vertikal tekislash
Mulk " vertikal tekislash"shuningdek jadval hujayralariga ta'sir qiladi." O'rta "qiymati o'rnatilganida, hujayra ichidagi tarkib markazlashtirilgan bo'ladi. Albatta, jadval tuzilishi bugungi kunda arxaik hisoblanadi, lekin alohida holatlarda siz uni belgilash orqali taqlid qilishingiz mumkin" displey: jadval katakchasi".
Odatda vertikal tekislash uchun ushbu parametrdan foydalanaman. Quyida tayyor loyihadan olingan maket namunasi keltirilgan. Shu tarzda vertikal ravishda markazlashtirilgan rasm qiziqish uyg'otadi.
.one_product .img_wrapper (displey: jadval-katak; balandlik: 169px; vertikal-tekislash: o'rtada; to'lib toshgan: yashirin; fon: #fff; kenglik: 255px;) .one_product img (max-height: 169px; max-width: 100 %; min-width: 140px; display: block; margin: 0 auto;)Shuni esda tutish kerakki, agar elementda "yo'q" dan tashqari "suzuvchi" bo'lsa, u holda u har qanday holatda blok bo'ladi (displey: blok) - u holda siz qo'shimcha blok-o'rash vositasidan foydalanishingiz kerak.
Qo'shimcha qatorli element bilan tekislash
Inline elementlar uchun siz murojaat qilishingiz mumkin " vertikal-tekislash: o'rtada"Bu holda," bilan barcha elementlar displey: inline"bitta satrda joylashganlar umumiy markaz chizig'iga to'g'ri keladi.
Balandligi ota blokning balandligiga teng bo'lgan yordamchi blokni yaratishingiz kerak, keyin kerakli blok markazlashtiriladi. Buning uchun: oldin yoki: keyin soxta elementlardan foydalanish qulay.
.example-wrapper6 (balandligi: 300px; matn bilan tekislash: markaz; fon: # 70DAF1;) .pudge (displey: inline-block; vertikal-tekislash: o'rta; fon: url (pudge.png); fon rang: # fff; kengligi: 200px; balandligi: 200px;) .riki (displey: inline-block; balandligi: 100%; vertikal-tekislash: o'rta;)Displey: egiluvchan va tekislang
Agar siz haqiqatan ham Explorer 8 foydalanuvchilari haqida g'amxo'rlik qilmasangiz yoki ular uchun qo'shimcha javascript qo'shishga tayyor bo'lsangiz, unda "display: flex" dan foydalanishingiz mumkin. Flex qutilari tekislash muammolarini hal qilishda juda yaxshi ishlaydi va tarkibni markazga yo'naltirish uchun shunchaki "margin: auto" yozing.
Hozircha bu usul deyarli menga tushmagan, ammo buning uchun maxsus cheklovlar mavjud emas.
Xo'sh, men yozmoqchi bo'lgan narsa shu CSS-ni tekislash... Endi tarkibni markazlashtirishda muammo bo'lmaydi!
HTML, ALIGN deb nomlangan umumiy parametr mavjud. Uni turli html teglari bilan qo'llash mumkin:
p | h1 | div | jadval | thead | tbody | tfoot | tr | th | td
Mumkin bo'lgan qiymatlar:
Markaz - markazni tekislash
Chapda - chapga tekislash
To'g'ri - o'ngda
Oqlash - kenglik bo'yicha, chapga va o'ngga. Bunday holda, so'zlar orasidagi katta bo'shliqlar paydo bo'lishi mumkin.
Matn asosli
Brauzerda ko'rinishi:
Sarlavha markazda joylashgan
Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli. Matn asosli.
Ushbu blokning tarkibi o'ng tomonga moslashtirilgan
Chap tekislash avtomatik ekanligini unutmang. Shuning uchun hizalama parametri uchun bunday qiymatni belgilashga hojat yo'q.
