... Va bu teg allaqachon " tekislang"qiymati, bu konteyner o'rnini belgilaydi. Uchta qiymat mavjud:" chap", "markaz", "to'g'ri". Odatiy bo'lib, bunga arziydi" chap"ammo, menimcha siz hayron bo'lmaysiz.

Keling, hozir ham shunday yozamiz HTML kodiammo konteynerlardan foydalangan holda, qo'shimcha ravishda markazni hizalamaymiz, lekin to'g'ri.

Ko'rib turganingizdek, hamma narsa ishlaydi. Sizga atribut qiymatlarini o'zgartirishni maslahat beraman " tekislang"konteyner hizalanmasının boshqa turlarini ko'rib chiqish uchun.

Elementlarni tekislashning yana bir usuli HTML - bu jadvallar, ammo bu mavzu alohida muhokamaga loyiqdir, shuning uchun bu haqda keyingi maqolalardan birida gaplashamiz.

Ungacha sizning sahifangiz quyidagicha ko'rinishi kerak:

1-darajali sarlavha, markazlashtirilgan

Hurmat bilan, Mixail Rusakov.

P.S. Agar siz ko'proq bilmoqchi bo'lsangiz HTMLkeyin ko'ring mening bepul kurs sayt yaratish misoli bilan HTML:

Kabi dasturlarda, masalan, Microsoft Word gorizontal matnni tekislash vositalarini ko'rgan bo'lsangiz kerak. Matnni chapga yoki o'ngga, markazga yoki kenglikka tekislashingiz mumkin. Xuddi shu narsa CSS-da ham xuddi shunday - matnni tekislash matnda align xususiyati va jadvalda ko'rsatilgan mos qiymatlar yordamida amalga oshiriladi:

Uslub yozishning misoli:

P (matn bilan tekislang: chapga;)

Chap, o'ng va markaziy qiymatlar Chapga tekislangan matn deyarli har doim veb-sahifalarda yaxshi ko'rinadi va o'qish oson. Evropa tillarida to'g'ri tekislash, qoida tariqasida, kamdan-kam hollarda qo'llaniladi, ammo uni butunlay foydasiz deb bo'lmaydi: bu uslub uchun foydalidir chiroyli dizayn fotosuratlarga yoki kotirovkalarga sarlavhalar, jadval katakchalari yoki matnning kichik qismlarini hizalamak. Markaz ko'pincha xuddi shu maqsadda ishlatiladi. Justify CSS matni sahifalarning bosilgan versiyalarida qo'llanilishi mumkin, ammo monitorda ko'rish uchun yaratilgan veb-sahifalarda ushbu uslub bilan shug'ullanish tavsiya etilmaydi. Nima uchun? Bir qarashda oqlangan matn, xuddi gazetadagi ustun kabi, chiroyli va bir tekis ko'rinadi. Ammo matnni shu tarzda cho'zish uchun brauzer so'zlar orasida qo'shimcha joy qo'shishi kerak, natijada matnda chirkin bo'shliqlar paydo bo'lishi va o'qishni qiyinlashtirishi mumkin. Ma'lumotlarni chop etishga tayyorlashga mo'ljallangan dasturlarda juda ko'p narsalar mavjud. puxta sozlash matndagi intervalni, shuningdek, ko'pincha ko'plab brauzerlarda mavjud bo'lmagan so'zlarni ishlatadi. Shuning uchun, kengligi bilan tasdiqlangan matn veb-sahifalarda qanday ko'rinishini tekshirishingiz kerak va birinchi navbatda o'zingizga savol bering: o'qish osonmi? Bu, ayniqsa, tor matn bloklari uchun to'g'ri keladi (shu jumladan). mobil versiyalar sahifalar). Matnni tekislash xususiyati uchun boshlang'ich va oxirgi qiymatlar CSS3-ga o'rnatilgan va chap va o'ng bilan bir xil ishlaydi, ammo farq bor. Chapdan o'ngga (LTR - chapdan o'ngga) boradigan matnga boshlang'ich qiymatini qo'llash chapga tekislanadi (shunga ko'ra, o'ngdan chapga (RTL - o'ngdan chapga) keladigan matn uchun, hizalama o'ng bo'ladi) ... Mantiqan, yakuniy qiymat teskari tarzda ishlaydi (ya'ni LTR matnini o'ngga, RTL matnini chapga tekislaydi). Ushbu ikkita qiymatni ba'zi brauzerlar qo'llab-quvvatlamaydi, shu jumladan Internet Explorer, shuning uchun ularni qo'llashning favqulodda hojati bo'lmasa, chap va o'ng qiymatlaridan foydalanishni tavsiya etamiz.

Skrinshotlarda foydalanish misollari ko'rsatilgan turli xil ma'nolar CSS xususiyati uchun matnni tekislash:

Skrinshot 1: boshlang'ich qiymatidan foydalangan holda LTR matni chapga tekislang. Shunga o'xshash ko'rinishga chap qiymat bilan erishish mumkin.
Skrinshot 2: yakuniy qiymatdan foydalangan holda LTR matnini o'ngga tekislash. Shunga o'xshash ko'rinishga to'g'ri qiymat bilan erishish mumkin.
Skrinshot 3: Matnni kengligi bo'yicha tekislash. Kichik bosma va katta sahifa / blok kengligi bilan veb-sahifadagi matnni tekislash uchun ushbu parametr maqbul ko'rinadi.
Skrinshot 4: Oldingi misolga nisbatan shrift kattalashtirildi va blok kengligi qisqartirildi. Ko'rib turganingizdek, matnda bir nechta chirkin bo'shliqlar mavjud (qizil chiziq bilan chizilgan).
Skrinshot 5: O'quv qo'llanmamizning mobil versiyasidan foydalangan holda matnni tekislashning ikkita usuli (chapda - text-align: left, right - text-align: justify). Qaysi birini o'qish qulayroq ekanligini aniqlash uchun ikkala ustundagi matnni o'qishga harakat qiling.

Ko'pincha odamlar juda dangasa yoki interfeysni o'rganishga vaqtlari yo'q microsoft dasturlari Word, shuning uchun "Word-da matnni qanday tekislash kerak?" Kabi savollar. - xo'sh, buni tushunib olaylik. Ushbu dasturga matn kiritishda u avtomatik rejim oqlandi. Uni markazga ko'chirsam bo'ladimi? Yoki o'ng tomonga? Albatta. Bundan tashqari, siz sarlavhani (hujjatning boshini) sahifaning o'rtasiga qo'yishingiz va matnning o'zini chap tomonga tekislashingiz mumkin.

MS Word-da matnni tekislashni o'rganing

"Uy" bo'limida maxsus tugmalar mavjud, ularning ba'zilari matnni markazga, chap va o'ng qirralarga, shuningdek hujjatning kengligiga moslashtirish uchun javobgardir.

Biz ularga birozdan keyin qaytib kelamiz, avval matnni qanday qilib hizalamaslikni aniqlaymiz.

Wordda matnni noto'g'ri hizalamak

Tajribasiz foydalanuvchilar tez-tez matnni kerakli vositalarni mavjud vositalar bilan moslashtirishni boshlaydilar - ya'ni ular qo'shimcha joylar qo'yishadi yoki "Tab" tugmachasini bosishadi. Bunday hizalama noto'g'ri deb hisoblanadi, chunki chap chegaradan masofa ko'z bilan hisoblab chiqiladi, bu matnni qo'shimcha kiritish yoki tahrirlashda juda noqulay. Bundan tashqari, ko'z bilan kerakli chuqurliklarni kiritish deyarli mumkin emas, shuning uchun ba'zi hujjatlar qabul qilinmasligi mumkin. Xususan, bu diplomlarga taalluqlidir - bitta o'qituvchi ham shu tarzda bosilgan matnni qabul qilmaydi - barcha talablarga chuqurlik va hizalamaya qadar qat'iy rioya qilish kerak. Bunga qo'shimcha ravishda, usulni o'zi qulay deb atash mumkin emas - muammoli tugmachalarni va Tab-ni juda ko'p bosishingiz kerak.

Diplom haqida gap ketganda bu bir narsa. Agar bu rasmiy hujjat bo'lsa-chi? Ushbu yondashuv bilan siz o'zingizning biznes obro'ingizni osongina yo'qotishingiz mumkin. Shuning uchun "Uy" bo'limida joylashgan matnli tugmachalarni tekislash uchun siz standart MS Word vositalaridan foydalanishingiz kerak.

Hujjatning to'g'riligini tekshirish uchun maxsus tugma ham mavjud, ustiga bosish orqali siz yashirin belgilarni ko'rasiz, shuning uchun dastlab matn dizayni masalasiga malakali murojaat qilish yaxshiroqdir.

Bosgandan so'ng, tushunarsiz belgilar, matnda ko'plab nuqta va o'qlar paydo bo'ladi.

Nuqtalar - siz qo'ygan bo'shliqlar. Oklar - Tab tugmachasini bosish, qolganlari bu bosqichda biz uchun amaliy ahamiyatga ega emas. Shunday qilib, agar siz matnni kerakli tarzda tekislash uchun ketma-ket juda ko'p bo'shliq qo'ygan bo'lsangiz, "Barcha belgilarni ko'rsatish" tugmachasini bosganingizda, sizning xatolaringiz darhol sezilib qoladi - juda ko'p nuqta va strelkalar.

Hujjatni qaytarish uchun xuddi shu fikr yana o'sha tugmani bosishingiz kerak.

Oddiy Microsoft Word vositalari yordamida matnni tekislang

Shunday qilib, ilgari taqdim etilgan to'rtta tugmachaga qayting.

Birinchisi chapga tekislash uchun javobgardir, ya'ni matn chap tomonga "magnitlangan" bo'ladi;

Ikkinchisi markazni tekislash uchun javobgardir;

Uchinchisi to'g'ri tekislash uchun javobgardir;

To'rtinchisi uni hujjat kengligi bo'yicha tekislaydi, ya'ni matnni chap va o'ng qirralarning o'rtasida teng ravishda taqsimlaydi, bu esa aniq va hatto qirralarga erishishga imkon beradi.

Ko'rib turganingizdek, hamma narsa juda oddiy. Biz sizni xursand qilishga shoshilamiz, matnni qayta yozishingiz shart bo'lmaydi - uni chop etgandan keyin ham tekislashingiz mumkin. Sichqoncha yordamida kerakli maydonni tanlang va tugmalaridan birini bosing.

Ushbu maqolada sizga blokni qanday joylashtirishni ko'rsataman div markazlashtirilgan... Ko'p usullar mavjud, ammo barchasi hammasi talab qilinadigan narsani aniq bajarishga imkon bermaydi. Men eng yaxshi va oddiy usullarga misol keltiraman.

Umuman olganda, to'g'ri tekislashning o'nlab usullari mavjud div blok markazlashgan holda, har bir veb-boshqaruvchi eng sevganidan / ko'proq foydalanadi qulay usul... Shunga qaramay, bir nechta asosiy, eng mashhur va mavjud universal usul... Va, albatta, ular barcha zamonaviy standartlarga muvofiqdir.

Ha, darhol aytish kerakki, bu usullar ya'ni 6-da ishlamasligi mumkin yoki shunga o'xshash narsa. Men hatto e'tibor bermayman berilgan brauzerqancha odam ishlatmasin. Eski narsalarni ishlatishdan voz kechish vaqti keldi.

Xo'sh, bizda nima bor?

Boshqaruv 1. Eng zo'r

margin: 0 avtomatik;

Juda yuqori samarali usul, bu ham yuqori va pastki chekkalarni tekislash imkonini beradi. Usulning ayyorligi nima? Hammasi shunchaki aqldan ozgan. Bizda ma'lum bir kenglikdagi (piksellarda yoki foizda) blok mavjud bo'lib, ular "avtomatik" xususiyatidan foydalanib, o'ng va chap tomonga bir xil indent o'rnatadi, natijada biz markazda div-blokni olamiz. Birinchi qiymat (misolda 0) yuqori va pastki plomba.

Masalan, yuqoridan tekislash uchun quyidagilarni yozing:

Marj: 10px avtomatik;

Yuqoridan va pastdan tekislash uchun:

Marj: 10px avtomatik 5px;

Menimcha, bu eng ko'p eng yaxshi usul markazda bloklarni tekislang... Bundan tashqari, u to'liq amal qiladi.

Boshqaruv 2. Foiz

Agar quti foiz kengligiga ega bo'lsa, unda biz tekislashimiz mumkin div markazlashtirilgan to'liq kenglikni 100% ga etkazish uchun teng to'ldirishni qo'llash. Agar tushunmasangiz, men sizga misol bilan ko'rsataman, osonroq:

Bizda 50% kenglikdagi blok bor, uni markazga tekislash uchun biz navbati bilan o'ngga va chapga 25% yon plomba qilishimiz kerak. Kodni ko'ring:

Zo'r bermasdan, biz markazda ahamiyatsiz matematikaga (50 + 25 + 25) tenglashtirilgan blokni olamiz

Boshqaruv 3. Aralash

Ushbu usul sharhlarda tavsiya etiladi sman.

Ushbu maqolaning boshida aytib o'tganimdek, blokni markazlashtirish uchun juda ko'p usullar mavjud. Har kim o'ziga yoqadiganini tanlaydi. Izohlar va yangi usullarni kutyapman 🙂

Boshqaruv 4. Qo'shimcha birlikdan foydalanish

Yo'l Viktor izohlarda:

Blokning kengligi noma'lum bo'lsa (masalan, menyu), biron bir usul blok ichidagi suzuvchi bilan muammoni hal qilmaydi.

Bunday hollarda men foydalanaman qo'shimcha blokhizalanayotgan blokni o'rab oladi. Bunga o'xshash uslubni tanlang:

# dop-blok (pozitsiya: nisbiy; suzuvchi: o'ng; o'ng: 50%;) #block (pozitsiya: nisbiy; suzuvchi: chap; chap: 50%;)

Sahifani joylashtirishda ko'pincha CSS usulida markazlashtirishni amalga oshirish kerak bo'ladi: masalan, asosiy blokni markazga. Ushbu muammoni hal qilishning bir nechta variantlari mavjud, ularning har biri ertami-kechmi har qanday dizayner tomonidan ishlatilishi kerak.

Matnni markazga tekislang

Ko'pincha, dekorativ maqsadlarda, matnni markazga moslashtirishni talab qilishadi, CSS bu holda tartib vaqtini qisqartirishga imkon beradi. Ilgari, bu HTML atributlari yordamida amalga oshirilgan bo'lsa, endi standart uslublar jadvallari yordamida matnlarni tekislashni talab qiladi. Chegaralarni o'zgartirishingiz kerak bo'lgan bloklardan farqli o'laroq, ichida CSS-ni tekislash markazlashtirilgan matn bitta satr bilan bajariladi:

• matn bilan tekislash: markaz;

Ushbu xususiyat meros qilib olinadi va ota-onadan barcha avlodlarga o'tadi. Nafaqat matnga, balki boshqa elementlarga ham ta'sir qiladi. Buning uchun ular inline (span kabi) yoki inline-blok (displeyga ega bo'lgan har qanday bloklar: blok xususiyati to'plami) bo'lishi kerak. Oxirgi variant, shuningdek, elementning kengligi va balandligini o'zgartirishga, chuqurliklarni moslashuvchan ravishda sozlashga imkon beradi.

Ko'pincha sahifalarda tekislash tegning o'ziga tegishli. Bu darhol kodni bekor qiladi, chunki align atributi W3C tomonidan bekor qilingan. Uni sahifada ishlatish tavsiya etilmaydi.

Blokni markazga tekislash

Agar siz divni markazlashtiradigan qilib o'rnatishingiz kerak bo'lsa, CSS juda qulay usulni taklif qilishi mumkin: margin yordamida. Ikkala blok elementlari uchun ham, inline-blok elementlari uchun ham indentsiyalar o'rnatilishi mumkin. Xususiyat qiymati 0 (vertikal kirishlar) va avtomatik (gorizontal avtomatik kirishlar) bo'lishi kerak:

• margin: 0 avtomatik;

Endi ushbu alohida variant mutlaqo haqiqiy deb tan olindi. Tashqi indentlardan foydalanish tasvirning markaziy hizalanishini ham o'rnatishga imkon beradi: elementni sahifada joylashtirish bilan bog'liq ko'plab muammolarni hal qilishga imkon beradi.

Blokni chapga yoki o'ngga tekislang

Ba'zida CSS-ni moslashtirish talab qilinmaydi, lekin siz ikkita blokni yonma-yon joylashtirishingiz kerak: biri chapda, ikkinchisi o'ngda. Buning uchun uchta qiymatdan birini olishi mumkin bo'lgan float xususiyati mavjud: chap, o'ng yoki yo'q. Aytaylik, yonma-yon joylashtirilishi kerak bo'lgan ikkita blokingiz bor. Keyin kod shunday bo'ladi:

• .left (suzuvchi: chap;)
• . o'ng (suzuvchi: o'ng)

Agar dastlabki ikkita blok ostida joylashgan bo'lishi kerak bo'lgan uchinchi blok bo'lsa (masalan, altbilgi), unda aniq mulkni ro'yxatdan o'tkazish kerak:

• .left (suzuvchi: chap;)
• . o'ng (suzuvchi: o'ng)
• altbilgi (aniq: ikkalasi ham)

Haqiqat shundaki, chap va o'ng sinflari bo'lgan bloklar umumiy oqimdan chiqib ketadi, ya'ni boshqa barcha elementlar moslashtirilgan elementlarning mavjudligini inobatga olmaydi. Aniq: ikkala xususiyat ham altbilgiga yoki boshqa blokga oqimsiz narsalarni ko'rishga imkon beradi va chapga ham, o'ngga ham suzishga ruxsat bermaydi. Shuning uchun, bizning misolimizda, altbilgi pastga siljiydi.

Vertikal tekislash

CSS usullaridan foydalangan holda markazni tekislashni belgilashning o'zi etarli bo'lmagan holatlar mavjud, shuningdek, bolalar blokining vertikal holatini o'zgartirishingiz kerak. Inline yoki inline-block har qanday elementni yuqori yoki pastki chetga, asosiy elementning o'rtasiga yoki biron bir joyga mahkamlash mumkin. Ko'pincha blokni markazga tekislash talab qilinadi, buning uchun vertikal-align atributidan foydalaniladi. Aytaylik, ikkita blok bor, biri ikkinchisiga joylashtirilgan. Ichki blok inline-blok elementidir (displey: inline-block). Bolalar blokini vertikal ravishda tekislashingiz kerak:

• yuqori tekislash -. bola (vertikal-tekislash: tepa);
• markazni tekislash -. bola (vertikal-tekislash: o'rta);
• pastki tekislash -. bola (vertikal-tekislash: pastki);

Matn-align yoki vertikal-align ham blok elementlariga ta'sir qilmaydi.

Hizalangan bloklar bilan bog'liq mumkin bo'lgan muammolar

Ba'zida divni markazga CSS usulida tekislash unchalik katta muammolarni keltirib chiqarmaydi. Masalan, float ishlatilganda: uchta blok bor deylik: .first, .sekund va .third. Ikkinchi va uchinchi bloklar birinchisida. Ikkinchi sinfga ega element chapga, oxirgi blok esa o'ngga to'g'ri keladi. Hizalamadan so'ng, ikkalasi ham oqimdan yiqilib tushishdi. Agar asosiy element belgilangan balandlikka ega bo'lmasa (masalan, 30em), u bolalar bloklari balandligi bo'ylab cho'zishni to'xtatadi. Ushbu xatoga yo'l qo'ymaslik uchun "spacer" - .second va .third ko'radigan maxsus blokdan foydalaning. CSS kodi:

• .sekund (suzuvchi: chapda)
• .uchinchi (suzuvchi: o‘ng)
• .clearfix (balandlik: 0; aniq: ikkalasi;)

The: soxta sinfdan keyin tez-tez foydalaniladi, bu esa bloklarni o'z joyiga soxta maket yaratib qo'yishga imkon beradi (masalan, konteyner sinfiga ega div .first ichida joylashgan bo'lib, tarkibida .left va .right mavjud):

• .left (suzuvchi: chapda)
• . o'ng (suzuvchi: o'ng)
• .container: after (tarkib: ""; displey: jadval; aniq: ikkalasi;)

Yuqoridagi variantlar eng keng tarqalgan, garchi bir nechta farqlar mavjud. Siz har doim tajribalar orqali psevdo-maket yaratishning eng oson va eng qulay usulini topishingiz mumkin.

Dizaynerlar tez-tez duch keladigan yana bir muammo - bu inline-blok elementlarini tekislashdir. Ularning har biridan keyin bo'sh joy avtomatik ravishda qo'shiladi. Margin xususiyati salbiy marjga o'rnatilgan bu bilan kurashishga yordam beradi. Juda kam qo'llaniladigan boshqa usullar mavjud: masalan, nollash Bunday holda, asosiy elementning xossalarida shrift hajmi: 0 yoziladi. Agar bloklar ichida matn bo'lsa, u holda inline-block elementlarining xususiyatlarida kerakli shrift hajmi qaytariladi. Masalan, shrift hajmi: 1em. Usul har doim ham qulay emas, shuning uchun tashqi chiziqli variant tez-tez ishlatiladi.

Bloklarni tekislash sizga chiroyli va funktsional sahifalarni yaratishga imkon beradi: bu umumiy maketning tartibi va Internet-do'konlarda tovarlarning joylashuvi va tashrifnomalar saytidagi fotosuratlar.