.

Align atributi juda universal bo'lib, uni nafaqat asosiy matnga, balki shunga o'xshash sarlavhalarga ham qo'llash mumkin

. 1-misol bunday holatda hizalanishni qanday o'rnatishni ko'rsatadi.

1-misol: Matnni tekislash

Sherni qanday tutish kerak?

Qo'pol kuch usuli

Biz cho'lni bir qator elementar maydonlarga ajratamiz, ularning kattaligi sherning umumiy o'lchamlariga to'g'ri keladi, lekin qafasning o'lchamidan kichikroqdir. Keyinchalik, oddiy qidiruv orqali biz sher joylashgan hududni aniqlaymiz, bu avtomatik ravishda uni qo'lga olishga olib keladi.

Dixotomiya usuli

Biz cho'lni ikkiga bo'lamiz. Bir qismida sher bor, ikkinchisida esa yo'q. Biz sher joylashgan yarmini olamiz va uni yana yarmiga bo'lamiz. Buni sher ushlanmaguncha takrorlaymiz.

Misolning natijasi rasmda ko'rsatilgan. 1.

Guruch. 1. Matnni o‘ngga va chapga tekislang

Ushbu misolda sarlavha brauzer oynasining o'rtasiga, ajratilgan paragraf o'ngga, asosiy matn esa chapga tekislangan.

Bir muncha vaqtgacha men, ko'pchiligingiz kabi ikkita usuldan foydalanganman:

1. Birinchi usul float xususiyatiga asoslangan. Chap blokga float beriladi: chap, o'ng blok float: o'ng
2. Ikkinchi usul - o'ng blokni mutlaqo joylashtirish, parametrlari o'ng: 0 yoki chap: 100%, chekka-chap: -(blok kengligi)

Ikkala usulning asosiy kamchiligi shundaki, agar bloklarni pastki chegara bo'ylab yoki bir-biriga nisbatan o'rta chiziq bo'ylab tekislash kerak bo'lsa, unda siz bloklarni vertikal ravishda siljitish uchun tanlash usulidan foydalanishingiz kerak va ularga yuqori: anyValue yoki margin-top: anyValue. Va birinchi usul, hamma narsaga qo'shimcha ravishda, yana bitta kamchilikka ega emas, balki yoqimsiz kichik narsa. Bu clearFix"a, overflow yoki qo'shimcha div yordamida oqimni tozalash zarurati.
Shunday qilib, usul raqami 3. Birinchidan, kod:

HTMLning o'zi

Manbadan nusxa ko'chirish | HTMLdan nusxa oling

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Chap blok< div class ="right">< a href ="#">O'ng blok

Aslida CSS

Manbadan nusxa ko'chirish | HTMLdan nusxa oling

1. .wrap(
2. kengligi: 500px;
3. fon: #555;
4. balandligi: 500px;
5. .chap, o'ng (
6. displey: inline -block;
7. // displey: inline;
8. //kattalashtirish: 1;
9. kengligi: 100%;
10. o'ng chekka: -100%;
11. vertikal tekislash: pastki;
12. .o'ng (
13. matnni tekislash: o'ngga;
14. .chap a , .o'ng a ( displey : inline - blok ; pozitsiya : nisbiy ; )
15. .left a (kengligi: 200px; balandlik: 100px; fon: yashil;)
16. .right a (kengligi: 100px; balandlik: 200px; fon: pushti;)

Tushuntirishlar

Usulning mohiyati margin-right: -100% yordamida bloklarni bir-birining ustiga qo'yish va text-align: right yordamida o'ng blokning mazmunini o'ngga tekislashdir.
Ikkala blokni (o'ng va chap) bitta satrga yozish tavsiya etiladi, aks holda, satr uzilish belgisi tufayli, o'ng blok ota-blok chegaralaridan biroz tashqariga chiqadi.
Havolalar joylashuvga o'rnatilishi kerak: nisbiy, aks holda bloklarning bir-birining ustiga chiqishi sababli ba'zilarini bosish mumkin emas.

Usulning afzalliklari

Asosiy afzallik shundaki, endi vertikal tekislash bizning bloklarimiz uchun ishlay boshlaydi. Va biz ularni yuqori chegara va pastki va markaz bo'ylab osongina tekislashimiz mumkin.

Usulning kamchiliklari

Va asosiy kamchilik shundaki, ushbu usuldan foydalanganda, biz bloklarning tarkibi bir-birining ustiga chiqa boshlaguncha ko'paymasligiga qat'iy ishonch hosil qilishimiz kerak (aytmoqchi, suzuvchi usul bu kamchilikdan xoli. , chunki bloklarning ko'payishi bilan ular bir-birining ostiga joylashadi).

P.S.

Men Internetda bunday usulni ko'rmadim, shuning uchun men so'rayman: agar kimdir ilgari nashr etilgan shunga o'xshash maqolani topsa, iltimos, menga xabar bering.

Upd.

Izohlarda mening e'tiborim matnni tekislashdan foydalanadigan usulga qaratildi: oqlash. Bu usul ham yaxshi, lekin uning ikkita kamchiligi bor. Birinchidan, u matn blokining oxirgi qatorini taqlid qiluvchi qo'shimcha elementni kiritishni talab qiladi, ikkinchidan, u blok elementlari uchun IE6-IE7 da ishlamaydi.

Ushbu maqolada biz veb-saytdagi CSS yordamida tasvirni o'ngga va chapga qanday tekislashni ko'rib chiqamiz.

CSS-da tasvirni o'ngga qanday tekislash mumkin

Rasmni o'ngga tekislash uchun "float:right" xususiyatidan foydalaning. Float xususiyati tasvirni (yoki boshqa elementni) blokli ko'rinishga o'zgartiradi, lekin ba'zi bir o'ziga xos xususiyatlarga ega: u boshqa blok elementlariga ko'rinmas bo'lib qoladi, lekin ayni paytda uni o'rab turgan inlinelar uchun ko'rinadigan bo'lib qoladi.

Bu xususiyat CSS-da tasvirni o'ngga va chapga, shuningdek, boshqa elementlarni jadvallar va juda ko'p keraksiz kodlardan foydalanmasdan chetiga tekislash imkonini beradi. Ushbu xususiyat qanday ishlashi haqida batafsil ma'lumotni "float css" so'rovi uchun qidiruv tizimlarida topish mumkin.

Rasm ko'chirilganda, matn va boshqa elementlar uning atrofida yaqindan aylana boshlaydi va ko'p hollarda u xunuk ko'rinadi, shuning uchun "margin y1 x1 y2 x2" xususiyatidan foydalanib, chetlarni qo'shing. "y1 x1 y2 x2" qiymatlari mos ravishda yuqoridagi, o'ngdagi, pastdagi va chapdagi plombalardir.

Suzuvchi float elementlarining noto'g'ri ko'rsatilishi

Yuqorida aytib o'tilganidek, suzuvchi float elementlari hisobga olinmaydi, chunki ular teglarni blokirovka qilish uchun ko'rinmaydi, shuning uchun noto'g'ri ko'rsatish paydo bo'lishi mumkin:

1 holat: float elementi uning asosiy qatlamining chegaralaridan tashqariga chiqadi.

2-holat: Blok elementidagi sarlavha va boshqa tarkib yangi satrda ko'rsatilmaydi, lekin suzuvchi turi bilan ota-onaga o'rala boshlaydi.

Suzuvchi suzuvchi elementlarning noto'g'ri ko'rsatilishini qanday tuzatish mumkin

Yuqorida tavsiflangan muammoni hal qilish uchun siz suzuvchi elementning so'nggi chegaralarini belgilashingiz kerak. Elementlarni blokirovka qilish uchun suzuvchi elementlar ko'rinmas bo'lgani uchun siz ularni o'rab qo'ymaydigan qo'shimcha tegdan foydalanishingiz kerak.

CSS suzuvchi float elementlari atrofida oqimning oldini olish uchun javob beradigan aniq xususiyatga ega. Aniq xususiyat elementni to'g'ridan-to'g'ri float ostiga siljitadi va shu bilan pastki chegarani o'rnatadi va agar kerak bo'lsa, asosiy blokni barcha float teglarining oxirigacha kengaytiradi.

Chegarani kengaytiruvchi sifatida tozalashni belgilaydigan har qanday blok tegidan foydalanish mumkin.

Aniq xususiyat quyidagi qiymatlarni olishi mumkin:

• yo'q- atrofdagi oqimga ruxsat berish;
• chap- chap tomonda atrofdagi oqimni taqiqlash;
• to'g'ri- o'ng tomonda aylanishni taqiqlash;
• ikkalasi ham- har ikki tomonning atrofida oqimni taqiqlash.

Chegarani suzuvchi blokning oxirigacha kengaytirishning eng keng tarqalgan usuli tegdan foydalanishdir
, ham foydalanish mumkin

ichki tarkibsiz.

CSS-da tasvirni chapga tekislash

Tasvirni CSS-da xuddi o'ngga o'xshash tarzda chapga tekislashingiz mumkin, lekin float: right o'rniga float: left ni yozasiz va chap chetidan chekinish o'rniga margin xususiyatidan foydalanib o'ngdan chekinishni o'rnatasiz.

Misollar

CSS-da tasvirni o'ngga tekislash uchun html kodiga misol (aniqlash shart emas)

Natija brauzerda

Sahifa kodi (aniq xususiyat kerak emas)

Yuqoridagi misolda tasvir o'ng chetiga bosilgan va chap cheti 15 pikselga teng.

CSS-da tasvirni o'ngga qanday tekislash haqida html kodiga misol (chegarani kengaytirish uchun tozalash kerak)

Natija brauzerda

Yuqoridagi misolda "border:4px solid #cccccc;" xususiyati mavjud. chegarani 4px qalin va #cccccc rangini bildiradi va padding:10px div tegining 10px ichki toʻldirishidir.

CSS-da rasmni chapga tekislash bo'yicha html kodiga misol (chegarani kengaytirish uchun tozalash kerak)

Natija brauzerda

Sahifa kodi (aniq xususiyatga ega)

Qushlar

Baliq

Matnni bu yerga joylashtirishingiz mumkin...

Yuqoridagi misolda tasvir chap chetiga bosilgan va yuqorida va o'ngda 15 px hoshiyaga ega.

6-modda. HTML-sahifadagi matnni tekislash (chap, markaz, o'ng va asosli)

Yaratilgan sana: 2009-11-29

1.

Shunday qilib, to'g'ri foydalanish "teg-paragraf" -, biz matnni joylashtirishimiz mumkin Chapga chekka, markazda, o'ng tomonidan chekka va kengligida sahifalar. Buning uchun atribut ochilish tegi ichiga kiritiladi align="chap", align="center", align="o'ng" yoki align="oqlash" mos ravishda.

Aslida, bu shunday ko'rinadi:

Matn markazga joylashtiriladi

Matn o'ng tomonga tekislanadi

Keling, misolimizga moslashtirishni qo'llaymiz. Men “Salom!” so‘zini o‘rtaga qo‘yaman. Buning uchun biz tanlaymiz.

(Yodda tutingki, teg ichida joylashgan matn matnning qolgan qismidan pastda va yuqorida paragraf bilan ajratiladi. Va shunga qaramay, yaxshi veb-sayt dizayneri bo'lish uchun siz nafaqat HTML, balki CSS (uslublar) va boshqa ko'plab dasturlarni ham o'rganishingiz kerak)

Endi hujjatni saqlang, hujjatni brauzerda yangilang va nima sodir bo'lishini ko'ring:

Natija:"Salom!" HTML sahifasining markazidagi yangi paragrafda joylashgan.

(agar biz paragrafdan align="..." parametrini olib tashlasak, u holda matn sukut bo'yicha chap chetiga o'tadi)

2. ...

Ikkinchi usulda siz matnni joylashtirishingiz mumkin faqat markazda. Ammo bu erda ham afzallik bor. Bu matn paragrafga joylashtirilmasligidan iborat. Buning uchun siz uni tegga qo'yishingiz kerak

... .

Bu juda oddiy. Bizning misolimizdagi o'zgarishlarni ko'rib chiqing va siz hamma narsani tushunasiz (aniqlik uchun men tegni olib tashladim
yopilish belgisidan keyin):

Endi matn faylini saqlang, brauzerni yangilang va natijani ko'ring:

Natija: Matn pastki yoki tepada chekinishsiz markazlashtirilgan.

3. Tegishlash

...

Matnni tekislash uchun foydalanishingiz mumkin bo'lgan uchinchi variant teglardir

.

U teglar bilan bir xil tarzda yozilgan:

- matn markazga joylashtiriladi

- matn chap tomonga joylashtiriladi

- matn o'ng chetida joylashgan bo'ladi

- matn sahifaning butun kengligi bo'ylab joylashadi

Aniqlik uchun men misolga o'zboshimchalik bilan matn kiritaman va unga kenglikni tekislashni qo'llayman, ya'ni sahifaning chetidan chetiga:

Endi, odatdagidek, matn faylini saqlang, brauzerni yangilang va natijaga qarang:

Natija: Biz buni ko'ramiz, yorliqdan farqli o'laroq

teg