. HTML5 paydo bo'lishi va maqola yoki sarlavha ko'rinishidagi jiddiy raqobatchilarning paydo bo'lishi bilan ham, u hamma joyda belgilarga kiritilishda davom etmoqda. Shuning uchun men sizga div bloklarini formatlash va markazlashtirish masalasini tushunishingizni taklif qilaman.

DIV nima

Elementning nomi inglizcha bo'linish so'zidan kelib chiqqan bo'lib, bo'linish degan ma'noni anglatadi. Belgilashni yozishda elementlarni bloklarga bo'lish uchun ishlatiladi. DIVs veb-sahifadagi kontent guruhlarini qamrab oladi. Masalan, tasvirlar, matnli paragraflar. Teg kontentni ko'rsatishga hech qanday ta'sir qilmaydi va semantik yukni ko'tarmaydi.

DIV barcha global atributlarni qo'llab-quvvatlaydi. Ammo veb-dizayn uchun sizga faqat ikkita - sinf va id kerak bo'ladi. Siz boshqalar haqida faqat ekzotik holatlarda eslaysiz va bu haqiqat emas. Ilgari divlarni markazga yoki chapga tekislash uchun ishlatilgan align atributi eskirgan.

DIV-lardan qachon foydalanish kerak

Tasavvur qiling-a, sayt muzlatgichdir va DIVlar - bu tarkibni saralashingiz kerak bo'lgan plastik idishlar. Siz mevani jigar go'shti bilan bir idishga solmaysiz. Siz har bir turdagi mahsulotni alohida joylashtirasiz. Veb-kontent xuddi shunday tarzda yaratiladi.

Har qanday veb-saytni oching va uni mazmunli bloklarga bo'ling. Yuqorida sarlavha, pastki qismda, asosiy matn markazda. Yon tomonda odatda reklama mazmuni yoki teg bulutli kichikroq ustun mavjud.

Endi har bir bo'limni batafsilroq ko'rib chiqing. Sarlavha bilan boshlang. Sayt sarlavhasida alohida logotip, navigatsiya, birinchi darajali sarlavha va ba'zan shior mavjud. Har bir semantik blokni o'z konteynerini tayinlang. Bu nafaqat oqimdagi elementlarni ajratibgina qolmay, balki ularni formatlashni ham osonlashtiradi. Ob'ektni DIV yorlig'iga sinf yoki identifikator berish orqali markazlashtirishni ancha osonlashtirasiz.

Chegaralar yordamida DIV-larni markazlashtirish

Veb-elementlarni ko'rsatishda brauzer uchta xususiyatni hisobga oladi: to'ldirish, chegaralash va chegara. To'ldirish - bu tarkib va ​​uning chegarasi orasidagi bo'shliq. Margin - bir ob'ektni boshqasidan ajratib turadigan maydonlar. Chegara - bu bloklar bo'ylab chiziqlar. Ular bir vaqtning o'zida barchasiga yoki faqat bir tomonga tayinlanishi mumkin:

div(chegara: 1px qattiq #333; chegara-chap: yo'q; )

Bu xususiyatlar ob'ektlar orasidagi bo'shliqni qo'shib, ularni to'g'ri tekislash va joylashtirishga yordam beradi. Misol uchun, agar rasmga ega blokni chap chetidan markazga 20% siljitish kerak bo'lsa, siz elementga 20% chap chekka qiymatini belgilaysiz:

Img bilan bloklash (chap cheti: 20%; )

Elementlarni kenglik qiymatlari va salbiy to'ldirish yordamida formatlash ham mumkin. Masalan, o'lchamlari 200x200px bo'lgan blok mavjud. Birinchidan, keling, unga mutlaq pozitsiyani belgilaymiz va uni markazga 50% ga o'tkazamiz.

Div (pozitsiya: mutlaq; chap: 50%; )

Endi markazlashtirilgan DIV toʻgʻri joylashishini taʼminlash uchun biz unga chapga uning kengligining 50% ga, yaʼni -100 pikselga teng manfiy chekka beramiz:

Chap cheti: -100px;

CSS-da bu "havoni olib tashlash" deb ataladi. Ammo bu doimiy hisob-kitoblarni amalga oshirish zaruratida sezilarli kamchilikka ega, bu bir necha darajali uyalar uchun buni qilish juda qiyin. Agar to'ldirish va chegara kengligi qiymatlari ko'rsatilgan bo'lsa, brauzer sukut bo'yicha konteyner o'lchamlarini chegaralar qalinligi, o'ng va chapdagi to'ldirish va ichidagi tarkibning yig'indisi sifatida hisoblab chiqadi. ham ajablanib bo'ladi.

Shunday qilib, siz DIVni markazlashtirishingiz kerak bo'lganda, chegara qutisi qiymati bilan box-sizing xususiyatidan foydalaning. Bu brauzerning DIV elementining umumiy kengligiga to'ldirish va chegara qiymatlarini qo'shishiga to'sqinlik qiladi. Elementni ko'tarish yoki tushirish uchun salbiy qiymatlardan ham foydalaning. Ammo bu holda, ular konteynerning yuqori yoki pastki maydoniga tayinlanishi mumkin.

Avtomatik chekkalar yordamida DIV blokini qanday markazlashtirish mumkin

Bu katta bloklarni markazlashtirishning oson usuli. Siz shunchaki konteynerning kengligi va margin xususiyatini avtomatik belgilashingiz mumkin. Brauzer blokni o'rtada chap va o'ng tomonda teng chegaralar bilan joylashtiradi va barcha ishlarni o'zi bajaradi. Natijada, siz matematik hisob-kitoblarda chalkashib ketish xavfini tug'dirmaysiz va vaqtingizni sezilarli darajada tejaysiz.

Javob beruvchi ilovalarni ishlab chiqishda avtomatik maydon usulidan foydalaning. Asosiysi, konteynerga em yoki foizda kenglik qiymatini belgilash. Yuqoridagi misoldagi kod DIVni markazlashtiradi va har qanday qurilmada, shu jumladan mobil telefonlarda u ekranning 90% ni egallaydi.

Displey xususiyati orqali tekislash: inline-block

Odatiy bo'lib, DIV elementlari blok elementlari hisoblanadi va ularning ko'rsatish qiymati blokdir. Ushbu usul uchun siz ushbu xususiyatni bekor qilishingiz kerak bo'ladi. Faqat asosiy konteynerga ega DIVlar uchun javob beradi:

Outer-div sinfiga ega elementga matnni markazlashtirgan markaz qiymatiga ega matnni tekislash xususiyati tayinlanadi. Ammo hozircha brauzer o'rnatilgan DIV ni blok ob'ekt sifatida ko'radi. Matnni tekislash xususiyati ishlashi uchun ichki div kichik harf sifatida ko'rib chiqilishi kerak. Shunday qilib, ichki div selektori uchun CSS jadvalida siz quyidagi kodni yozasiz:

Inner-div (displey: inline-block; )

Displey xususiyatini blokdan inline-blokga o'zgartirasiz.

aylantirish/tarjima usuli

Kaskadli uslublar jadvallari veb-elementlarni o'z xohishiga ko'ra ko'chirish, burish, aylantirish va boshqa yo'l bilan o'zgartirish imkonini beradi. Buning uchun transform xususiyatidan foydalaniladi. Qiymatlar kerakli transformatsiya turi va darajasini ko'rsatadi. Ushbu misolda biz translate bilan ishlaymiz:

o'zgartirish: tarjima qilish (50%, 50%);

Tarjima funksiyasi elementni joriy holatidan chapga/o‘ngga va yuqoriga/pastga siljitadi. Ikkita qiymat qavs ichida berilgan:

• gorizontal harakatlanish darajasi;
• vertikal harakat darajasi.

Agar elementni koordinata o'qlaridan faqat bittasi bo'ylab harakatlantirish kerak bo'lsa, tarjima so'zidan keyin siz o'qning nomini va qavs ichida kerakli siljish miqdorini ko'rsatasiz:

Transform: translateY(-20%);

Ba'zi qo'llanmalarda sotuvchi prefikslari bilan transformni topishingiz mumkin:

Webkit-transform: tarjima qilish (50%, 50%); -ms-transform: tarjima qilish (50%, 50%); o'zgartirish: tarjima qilish (50%, 50%);

2018-yilda bu endi kerak emas; mulk barcha brauzerlar, jumladan Edge va IE tomonidan qo'llab-quvvatlanadi.

Biz xohlagan DIVni markazlashtirish uchun CSS translate funksiyasi vertikal va gorizontal o'q uchun 50% qiymati bilan yoziladi. Bu brauzer elementni joriy holatidan kengligi va balandligining yarmiga siljishiga olib keladi. Kenglik va balandlik xususiyatlari ko'rsatilishi kerak:

Transformatsiya xususiyati qo'llaniladigan element uni o'rab turgan ob'ektlardan mustaqil ravishda harakatlanishini yodda tuting. Bir tomondan, bu qulay, lekin ba'zida harakatlanayotganda, DIV boshqa konteynerni qoplashi mumkin. Shuning uchun veb-komponentlarni markazlashtirishning ushbu usuli nostandart hisoblanadi va faqat o'ta zarur hollarda qo'llaniladi. Animatsiya uchun barcha CSS kanonlariga muvofiq o'zgartirishlar qo'llaniladi.

Flexbox layout bilan ishlash

Flexbox veb-layoutlarni loyihalashning murakkab usuli hisoblanadi. Ammo agar siz uni o'zlashtirsangiz, standart formatlash usullariga qaraganda ancha sodda va yoqimli ekanligini tushunasiz. Flexbox spetsifikatsiyasi elementlarni boshqarishning moslashuvchan va nihoyatda kuchli usulidir. Modulning nomi ingliz tilidan "moslashuvchan konteyner" deb tarjima qilingan. Elementlarning kengligi, balandligi va joylashuvi qiymatlari chekinish va chekkalarni hisoblamasdan avtomatik ravishda o'rnatiladi.

Oldingi misollarda biz allaqachon displey xususiyati bilan ishlagan edik, lekin biz uni bloklash va inline-blok qiymatlariga o'rnatdik. Moslashuvchan tartiblarni yaratish uchun biz display: flex-dan foydalanamiz. Avval bizga moslashuvchan konteyner kerak:

Uni kaskadli jadvallarda moslashuvchan konteynerga aylantirish uchun biz yozamiz:

Flex-konteyner (ekran: flex; )

Barcha ichki o'rnatilgan ob'ektlar, faqat to'g'ridan-to'g'ri avlodlar moslashuvchan elementlar bo'ladi:

Agar siz ro'yxatni moslashuvchan konteyner ichiga joylashtirsangiz, u holda li ro'yxat elementlari moslashuvchan elementlar hisoblanmaydi. Flexbox tartibi faqat ul da ishlaydi:

Moslashuvchan elementlarni joylashtirish qoidalari

Moslashuvchan elementlarni boshqarish uchun sizga justify-content va align-elementlar kerak bo'ladi. Siz belgilagan qiymatlarga qarab, bu ikki xususiyat kerak bo'lganda ob'ektlarni avtomatik ravishda joylashtiradi. Agar biz barcha ichki o'rnatilgan DIV-larni markazlashtirishimiz kerak bo'lsa, biz justify-content yozamiz: markaz, align-elementlar: markaz va boshqa hech narsa. Brauzer qolgan ishni o'zi bajaradi:

Matnni moslashuvchan elementlar bo'lgan DIV-larga markazlashtirish uchun siz standart matnni tekislash texnikasidan foydalanishingiz mumkin. Yoki har bir ichki o'rnatilgan DIVni moslashuvchan konteynerga aylantirishingiz va justify-content yordamida tarkibni boshqarishingiz mumkin. Agar u turli xil tarkibni, jumladan, grafikalarni, boshqa ichki o'rnatilgan ob'ektlarni, shu jumladan ko'p darajali ro'yxatlarni o'z ichiga olsa, bu usul ancha oqilona bo'ladi.

Xayrli kun, ushbu nashr obunachilari va o'quvchilari. Bugun men batafsil ma'lumot bermoqchiman va CSS-da matnni qanday markazlashtirishni aytmoqchiman. Avvalgi ba'zi maqolalarda men bilvosita ushbu mavzuga to'xtalib o'tdim, shuning uchun siz ushbu sohada ma'lumotga egasiz.

Biroq, ushbu nashrda men sizga ob'ektlarni tekislashning barcha turli usullari haqida gapirib beraman, shuningdek, paragraflarni qanday qilib chekinish va qizil chiziq bilan chizishni tushuntiraman. Shunday qilib, keling, materialni o'rganishni boshlaylik!

HTML va uning avlodlari va tekislang

Bu usul deyarli qo'llanilmaydi, chunki u kaskadli uslublar jadvali vositalari bilan almashtirildi. Biroq, bunday teg borligini bilish sizga zarar keltirmaydi.

Tekshirishga kelsak (bu atama "" maqolasida batafsil tavsiflangan), html spetsifikatsiyasining o'zi foydalanishni qoralaydi. < markaz>, chunki amal qilish uchun o'tishdan foydalanish kerak DOCTYPE>.

Bu turtaqiqlangan elementlarning o'tishiga imkon beradi.

Endi atributga o'tamiz tekislash. U ob'ektlarning gorizontal tekislanishini o'rnatadi va teg deklaratsiyasidan keyin mos keladi. Odatda, u kontentni chapga tekislash uchun ishlatilishi mumkin ( chap), o'ng chetida ( to'g'ri), markazlashtirilgan ( markaz) va matn kengligi ( oqlash).

Quyida men rasm va paragrafni markazga joylashtirgan misol keltiraman.

Bu kontent markazlashtiriladi.

E'tibor bering, rasm uchun biz tahlil qilayotgan atribut biroz boshqacha ma'noga ega.

Men ishlatgan misolda tekislash =o'rta". Buning yordamida tasvir jumla rasmning o'rtasida aniq joylashishi uchun tekislandi.

CSS-da markazlashtiruvchi vositalar

Bloklarni, matn va grafik tarkibni tekislash uchun mo'ljallangan CSS xususiyatlari ko'proq qo'llaniladi. Bu, birinchi navbatda, uslublarni amalga oshirishning qulayligi va moslashuvchanligi bilan bog'liq.

Shunday qilib, matnni markazlashtirishning birinchi xususiyatidan boshlaylik - bu matn -tekislash.

U hizalanish bilan bir xil ishlaydi. Kalit so'zlar orasida siz umumiy ro'yxatdan birini tanlashingiz yoki ajdodning xususiyatlarini meros qilib olishingiz mumkin ( meros).

Shuni ta'kidlashni istardimki, css3 da siz yana 2 ta parametrni o'rnatishingiz mumkin: boshlash- matn yozish qoidalariga qarab (o'ngdan chapga yoki aksincha), chapga yoki o'ngga tekislashni o'rnatadi (chap yoki o'ng ishiga o'xshash) va oxiri– boshlanishning teskarisi (matnni chapdan o‘ngga yozishda u o‘ng, o‘ngdan chapga yozganda – chap tomonda ishlaydi).

O'ngdagi jumla

Oxiri ishlatiluvchi gap

Men sizga kichik bir hiyla haqida aytib beraman. Qiymatni tanlashda oqlash oxirgi chiziq pastdan yoqimsiz osilib turishi mumkin. Masalan, uni markazda joylashtirish uchun siz mulkdan foydalanishingiz mumkin matnni tekislash-oxirgi.

Sayt tarkibini yoki jadval kataklarini vertikal ravishda tekislash uchun xususiyatdan foydalaning vertikal tekislash. Quyida men elementning asosiy kalit so'zlarini tasvirlab berdim.

Kalit so'z	Maqsad
asosiy chiziq	Asosiy chiziq deb ataladigan ajdod chizig'iga moslashishni belgilaydi. Agar ajdod ob'ektida bunday chiziq bo'lmasa, u holda tekislash pastki chegara bo'ylab sodir bo'ladi.
o'rtada	Mutatsiyaga uchragan ob'ektning o'rtasi asosiy chiziqqa to'g'ri keladi, unga asosiy elementning balandligi qavati qo'shiladi.
pastki	Tanlangan tarkibning pastki qismi uning ostidagi ob'ektning pastki qismiga moslashadi.
yuqori	Pastki qismga o'xshash, lekin ob'ektning yuqori qismi bilan.
super	Belgini ustun qiladi.
sub	Elementni subscript qiladi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

C IN E THAQIDATO

C IN E THAQIDATO

Chiziqlar

Va nihoyat, biz paragrafning chegaralariga keldik. CSS tili maxsus xususiyatdan foydalanadi matn chegarasi.

Uning yordami bilan siz qizil chiziqni ham, protrusionni ham qilishingiz mumkin (siz salbiy qiymatni ko'rsatishingiz kerak).

Qizil chiziq yaratish uchun siz faqat bitta parametrni bilishingiz kerak.

Bu oddiy matn-indent xususiyati.

Juda keng tarqalgan tartib vazifasi div blokida matnni vertikal ravishda tekislashdir.

Agar matnni gorizontal tekislashda odatda muammolar bo'lmasa (biz text-align:center xususiyatidan foydalanamiz va hamma narsa yaxshi bo'ladi), u holda vertikal tekislash bilan hamma narsa biroz murakkabroq.

CSS-da vertical-align deb nomlangan bitta xususiyat mavjud. Uning yordamida siz barcha muammolarni hal qila olasiz. Lekin u erda yo'q edi.

Shuni hisobga olish kerakki, vertikal tekislash faqat jadval kataklari tarkibini tekislash yoki ichki elementlar uchun, ularni bir qatorda bir-biriga nisbatan tekislash uchun ishlatilishi mumkin.

Blok elementlari uchun vertikal tekislash xususiyati ishlamaydi.

Ushbu vaziyatdan chiqishning ikki yo'li mavjud:

Hamma narsani videoda ko'rishni afzal ko'rganlar uchun:

Matnni yaxshi ko'radiganlar uchun ushbu muammoni hal qilish uchun quyida o'qing.

A usuli. Bitta yechim matnni div elementiga emas, balki jadval katakchasiga joylashtirishdir.

1-qator 2-qator 3-qator

B usuli. Display:table-cell xususiyatidan foydalaning;

1-qator

2-qator

3-qator

Muammolardan biri shundaki, bu xususiyat Internet Explorer 6-7 versiyalarida qo'llab-quvvatlanmaydi.

Vaziyat 1.Matnning bir qatorini tekislang.

Keling, oddiy misolni ko'rib chiqaylik.

Matn satri yuqori chetida joylashgan. Chunki Bizda faqat bitta satr matni borligi sababli, tekislashning eng oddiy usulidan foydalanishimiz mumkin: matn joylashgan div elementining balandligiga teng qiymat bilan line-height xususiyatini qo'shish.

Vertikal hizalanishi kerak bo'lgan chiziq

Bu usul faqat bitta satr matnga ega bo'lganda yaxshi ishlaydi.

Vaziyat 2. Agar siz matnning o'zi joylashgan bola blokining aniq kengligi va balandligini bilsangiz.

Bu yechim bola bloki uchun position:absolute xususiyatidan foydalanishni, uni asosiy blokga mutlaqo nisbatan joylashishni o‘z ichiga oladi.

1-qator

2-qator

3-qator

Blokning kengligi va balandligini bilib, siz ushbu qiymatning yarmini olishingiz va uni chekka chap va margin-top xususiyatlari uchun salbiy qiymatlar bilan belgilashingiz mumkin.

Agar eski brauzerlarni qo'llab-quvvatlash kerak bo'lmasa, bu variant eng maqbul bo'ladi.

Ko'rib turganingizdek, matnni markazlashtirish kabi oddiy vazifa amalda unchalik oson emas edi.

Float xususiyatiga ega bo'lgan tarkibni gorizontal tekislash juda oson bajarilishi mumkin va u butunlay o'zaro faoliyat brauzerdir (Opera 8+, Firefox 3+, IE 5.5+ da ishlaydi).

Div bloklarini tekislash misoli

Float blokini yoki bir qatorda bir nechta bloklarni tekislash uchun sizga boshqa tashqi blok kerak bo'ladi. Tashqi blok va ichki bloklar o'rni tayinlangan: mutlaq; va float: chap; , tashqi chapni tayinlash: 50%; , va ichki bloklar uchun o'ng: 50%; . Floatdan foydalanish uchun: o'ng; tashqi tayinlash huquqini belgilash kerak: 50%; , va qolgan ichki bloklar uchun: 50%; . Men markazga tekislangan elementlardan keyin: har ikkisi ham; xususiyati bilan blokni joylashtirish orqali floatlarni tozalashni tavsiya qilaman. .

Shu tarzda siz quyidagi markazlashtirishga erishishingiz mumkin:

Id = blok-ichki blokli ichki blok yashil chegaraga ega, id = blokli tashqi blok esa vaqti-vaqti bilan qizil chegaraga ega.

Kontentni bloklash

#blok (pozitsiya: nisbiy; float: chap; chap: 50%; chegara: 1px chiziqli #a00; ) #blok-ichki (pozitsiya: nisbiy; float: chap; o'ng: 50%; chegara: 2px qattiq #0a0; to'ldirish : 10px; ) #page (toshib ketish: yashirin; )

Menyu bandini tekislash misoli

Amalda, yuqoridagi misol sayt menyusini gorizontal ravishda tekislashda qo'llanilishi mumkin. Biroq, shuni hisobga olishingiz kerakki, elementlarning etarlicha ko'pligi (kengligi bo'yicha sahifaning yarmidan ko'pini egallagan) bilan gorizontal aylantirish paydo bo'ladi. Undan qutulish uchun siz tashqi blokda overflow xususiyatini qo'llashingiz kerak. Agar menyu ochiladigan menyu bo'lsa, uning ochiladigan elementlari ushbu tashqi blok tomonidan kesilishi mumkin. Ushbu muammoni oldini olish uchun siz to'ldirish xususiyatini iloji boricha o'rab turgan blokga qo'llashingiz kerak, masalan, sahifaning butun tarkibini o'rnatadigan eng tashqi blok.

Masalan, menyuni quyidagicha tekislashingiz mumkin:

Ul roʻyxatining li bandlarida yashil chegara, ul roʻyxatida esa qirrali qizil chegara bor.

Quyidagi misol uchun HTML kodi quyidagicha ko'rinadi:

• Tegishli element 1
• Tegishli element 2
• Tegishli element 3
• Tegishli element 4
• Tegishli element 5

Quyidagi misol uchun CSS kodi quyidagicha ko'rinadi:

#menyu (pozitsiya: nisbiy; float: chap; chap: 50%; chegara: 1px chiziqli #a00; ro'yxat uslubi: yo'q; chekka: 0; to'ldirish: 0; ) #menyu li (pozitsiya: nisbiy; float: chap; o'ng: 50%; hoshiya: 2px qattiq #0a0; to'ldirish: 10px; ) #page (toshib ketish: yashirin; )

Shunday qilib, bu juda oddiy. Yangi usullarni o'zlashtirishda muvaffaqiyatlar tilayman.

Elementlarni gorizontal va vertikal ravishda tekislash turli usullar bilan amalga oshirilishi mumkin. Usulni tanlash element turiga (blok yoki inline), uning joylashish turiga, o'lchamiga va boshqalarga bog'liq.

1. Blok/sahifa markaziga gorizontal tekislash

1.1. Agar blok kengligi belgilangan bo'lsa:

div (kengligi: 300px; hoshiya: 0 auto; /*elementni asosiy blok ichida gorizontal ravishda markazlashtiring*/)

Agar siz chiziqli elementni shu tarzda tekislashni istasangiz, u quyidagi ko'rinishga sozlanishi kerak: blok;

1.2. Agar blok boshqa blok ichiga o'rnatilgan bo'lsa va uning kengligi ko'rsatilmagan/belgilanmagan bo'lsa:

.wrapper(matnni tekislash: markaz;)

1.3. Agar blokning kengligi bo'lsa va uning asosiy blokida markazlashtirilishi kerak bo'lsa:

.wrapper (pozitsiya: nisbiy; /*ota blok uchun nisbiy joylashishni o'rnating, shunda biz blokni uning ichida mutlaqo joylashtira olamiz*/) .box ( kengligi: 400px; joy: mutlaq; chap: 50%; chet-chap: -200px; / *blokni kengligining yarmiga teng masofaga chapga siljiting*/ )

1.4. Agar bloklarning kengligi ko'rsatilmagan bo'lsa, siz ularni asosiy o'rash bloki yordamida markazlashtirishingiz mumkin:

.wrapper (matnni tekislash: markaz; /*blok tarkibini markazga joylashtirish*/) .box ( displey: inline-block; /*bloklarni gorizontal ravishda joylashtirish*/ margin-o‘ng: -0,25em; /* bloklar orasidagi to'g'ri bo'shliqni olib tashlang*/ )

2. Vertikal tekislash

2.1. Agar matn bitta qatorni egallasa, masalan, tugmalar va menyu elementlari uchun:

.button (balandligi: 50px; chiziq balandligi: 50px; )

2.2. Blokni asosiy blok ichida vertikal tekislash uchun:

.wrapper (joylashuvi: nisbiy;).box (balandlik: 100px; pozitsiya: mutlaq; tepa: 50%; chet: -50px 0 0 0; )

2.3. Jadval turi bo'yicha vertikal tekislash:

.wrapper ( displey: jadval; eni: 100%; ) .box ( displey: jadval-hujayra; balandlik: 100px; matnni tekislash: markaz; vertikal tekislash: o'rta; )

2.4. Agar blok ma'lum kenglik va balandlikka ega bo'lsa va uning asosiy blokida markazlashtirilishi kerak bo'lsa:

.wrapper (pozitsiya: nisbiy; ) .box (balandlik: 100px; eni: 100px; joylashuv: mutlaq; tepa: 0; oʻng: 0; pastki: 0; chap: 0; chekka: avtomatik; toʻlib ketish: avtomatik; /*to kontent tarqalmadi */)

2.5. CSS3 transformatsiyasi yordamida sahifa/blok markazida mutlaq joylashish:

agar element uchun o'lchamlar ko'rsatilgan bo'lsa

div (kengligi: 300px; /*blokning kengligini belgilang*/ balandligi:100px; /*blokning balandligini belgilang*/ transform: translate(-50%, -50%); pozitsiya: mutlaq; tepa: 50 %; chap: 50%; )

agar elementning o'lchamlari bo'lmasa va bo'sh bo'lmasa

Bu yerda ba'zi matn

h1 (chekka: 0; o'zgartirish: tarjima qilish(-50%, -50%); pozitsiya: mutlaq; tepa: 50%; chap: 50%; )