Зохиогчоос:Таныг манай блог хуудсууд руу дахин тавтай морилно уу. Өнөөдрийн нийтлэлд би блокууд болон тэдгээрийн агуулгад хоёуланд нь хэрэглэж болох янз бүрийн тэгшитгэх аргуудын талаар ярихыг хүсч байна. Ялангуяа css дээр блокуудыг хэрхэн зэрэгцүүлэх, мөн текстийн зэрэгцүүлэх.

Блокуудыг төв рүү чиглүүлнэ

Css дээр блокыг голлуулахад хялбар байдаг. Энэ бол олон хүмүүсийн хувьд хамгийн алдартай техник боловч би яг одоо энэ талаар ярихыг хүсч байна. Энэ нь үндсэн элементтэй харьцуулахад хэвтээ байдлаар төвлөрсөн байх ёстой. Үүнийг хэрхэн хэрэгжүүлж байна вэ? Бидэнд сав байна гэж бодъё, бидний туршилтын субъект дотор нь байна:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Энэ бол сайтын толгой хэсэг гэж бодъё. Энэ нь цонхны бүх өргөнийг хамардаггүй бөгөөд бид үүнийг голчлох хэрэгтэй. Бид ингэж бичдэг:

#толгой( өргөн / хамгийн их өргөн: 800px; захын зай: 0 автомат;

Бид яг эсвэл хамгийн их өргөнийг зааж өгөх хэрэгтэй бөгөөд дараа нь гол шинж чанарыг бичих хэрэгтэй - margin: 0 auto. Энэ нь бидний толгой хэсгийн захын зайг тогтоодог, эхний утга нь дээд ба доод талаас, хоёр дахь нь баруун, зүүн талын зайг тодорхойлдог. Автомат утга нь хөтчөөс хоёр талын дэвсгэрийг автоматаар тооцоолохыг зааварчилдаг бөгөөд ингэснээр элемент нь үндсэн элемент дээр яг төвлөрөх болно. Тав тухтай!

Текстийн зэрэгцүүлэх

Энэ нь бас маш энгийн заль мэх юм. Бүх доторлогооны элементүүдийг зэрэгцүүлэхийн тулд та text-align шинж чанар болон түүний утгыг ашиглаж болно: зүүн, баруун, төв. Сүүлд нь текстийг голлодог бөгөөд энэ нь бидний хүсч буй зүйл юм. Зургийг ч гэсэн ижил аргаар зэрэгцүүлж болно, учир нь энэ нь анхдагч байдлаар доторх элемент юм.

Текстийг босоо байдлаар зэрэгцүүлнэ

Гэхдээ энэ нь аль хэдийн илүү хэцүү болсон. Анхдагч байдлаар, блок саванд текстийг босоо байдлаар хялбархан төвлөрүүлэх тийм энгийн алдартай өмч байдаггүй. Гэсэн хэдий ч олон жилийн турш зохион бүтээгчид хэд хэдэн заль мэхийг гаргаж ирсэн.

Блокны өндрийг дэвсгэр ашиглан тохируулна уу. Энэ арга нь өндрөөр тодорхой өндрийг тогтоохгүй, харин дээд ба доод жийргэвчээр зохиомлоор үүсгэх бөгөөд энэ нь ижил байх ёстой. Дурын блок үүсгээд түүнд дараах шинж чанаруудыг бичье.

div( дэвсгэр: #ccc; дэвсгэр: 30px 0; )

див ( дэвсгэр: #ccc; дүүргэх: 30px 0;

Арын дэвсгэр нь зүгээр л ирмэгийг нь нүдээр харах, мөн дэвсгэрийг нь харах явдал юм. Одоо блокны өндөр нь эдгээр хоёр догол болон шугамаас бүрдэх бөгөөд бүгд дараах байдлаар харагдаж байна.

Блокны шугамын өндрийг тодорхойл. Илүү их гэж бодож байна Зөв замХэрэв та текстийн нэг мөрийг зэрэгцүүлэх шаардлагатай бол. Үүний тусламжтайгаар та height шинж чанарыг ашиглан хэвийн өндрийг бичиж болно. Үүний дараа тэрээр шугамын өндрийг бүхэлд нь блокийн өндөртэй адил тохируулах хэрэгтэй.

div(өндөр: 60px; шугамын өндөр: 60px; )

див ( өндөр: 60px шугамын өндөр: 60px;

Үр дүн нь дээрх зурагтай төстэй байх болно. Та дэвсгэр нэмсэн ч бүх зүйл ажиллах болно. Гэсэн хэдий ч зөвхөн нэг мөрөнд зориулагдсан. Хэрэв танд элементэд илүү текст хэрэгтэй бол энэ аргаажиллахгүй.

Блокыг хүснэгтийн нүд рүү хөрвүүлэх. Энэ аргын мөн чанар нь vertical-align: middle шинж чанар нь элементийг босоо байдлаар төвлөрүүлдэг хүснэгтийн нүдэнд үйлчилдэгт оршино. Үүний дагуу, энэ тохиолдолд блокыг дараах байдлаар тохируулах ёстой.

div(дэлгэц: хүснэгт-нүд; босоо зэрэгцүүлэх: дунд; )

див ( дэлгэц: хүснэгт - нүд; босоо - зэрэгцүүлэх: дунд;

Энэ арга нь сайхан, учир нь та хүссэн хэмжээгээрээ төв хэсэгт нь зэрэгцүүлж болно. Гэхдээ дэлгэц: хүснэгтийг манай div байрлуулсан блок руу тохируулах нь дээр, эс тэгвээс энэ нь ажиллахгүй байж магадгүй юм.

За, бид өнөөдрийн сүүлчийн заль мэхэнд хүрлээ - энэ бол блокуудыг босоо байдлаар байрлуулах явдал юм. Энэ зорилгоор тусгайлан зориулсан өмч байхгүй гэдгийг дахин хэлэх ёстой, гэхдээ та мэдэж байх ёстой хэд хэдэн заль мэх байдаг.

Оффсетийг хувиар тогтоо. Хэрэв та үндсэн элементийн өндрийг мэдэж, дотор нь өөр блок түвшний элементийг байрлуулбал хувь хэмжээг ашиглан голчлон байрлуулж болно. Жишээлбэл, эцэг эх нь 600px өндөртэй. Та дотор нь 300 пикселийн өндөртэй блок байрлуул. Үүнийг голлуулахын тулд дээрээс болон доороос хэр их нөөцлөх шаардлагатай вэ? Тус бүр нь 150 пиксел бөгөөд энэ нь эцэг эхийн өндрийн 25% юм.

Энэ арга нь хэмжээсүүд нь тооцоолол хийх боломжийг олгодог үед л төвлөрлийг хийх боломжийг олгодог. Хэрэв та 887 пикселийн өндөртэй эцэг эхтэй бол та яг юу ч бичиж чадахгүй, энэ нь аль хэдийн тодорхой болсон.

Хүснэгтийн нүдэнд элемент оруулах. Дахин хэлэхэд, хэрэв бид өөрчлөгдвөл эх элементХүснэгтийн нүд рүү оруулбал түүнд оруулсан блок автоматаар босоо байдлаар төвлөрнө. Үүнийг хийхийн тулд эцэг эх нь vertical-align: middle-г тохируулахад л хангалттай.

Хэрэв үүнээс гадна бид маржин: 0 auto гэж бичвэл элемент нь хэвтээ төвлөрсөн байх болно!

Текстийн зэрэгцүүлэх, доголтыг тодорхойлох HTML шошгууд

Типографид ашигласан үндэслэлтэй текст

Доорх жишээ нь хэрхэн тэгшлэхийг харуулж байна текстийг өргөн хүртэлхуудаснууд:

зэрэгцүүлэх = "зүүн"	тэгшлэх = "баруун"
	Үйлчилгээний салбарт ажиллаж байгаа ажилчдын тоо өдөр бүр нэмэгдэж, мэдээлэл түгээх нь нэмэгдсээр байна. Өнгөрсөн зууны билэг тэмдэг нь ферм, үйлдвэр байсан бол өнөөгийн 21-р зууны бэлгэ тэмдэг нь мэдээллийн урсгалд нэвтрэх боломжтой компьютерээр тоноглогдсон оффис юм.
тэгшлэх = "зөвтгөх"	тэгшлэх = "төв"
Үйлчилгээний салбарт ажиллаж байгаа ажилчдын тоо өдөр бүр нэмэгдэж, мэдээлэл түгээх нь нэмэгдсээр байна. Өнгөрсөн зууны билэг тэмдэг нь ферм, үйлдвэр байсан бол өнөөгийн 21-р зууны бэлгэ тэмдэг нь мэдээллийн урсгалд нэвтрэх боломжтой компьютерээр тоноглогдсон оффис юм.	Үйлчилгээний салбарт ажиллаж байгаа ажилчдын тоо өдөр бүр нэмэгдэж, мэдээлэл түгээх нь нэмэгдсээр байна. Өнгөрсөн зууны билэг тэмдэг нь ферм, үйлдвэр байсан бол өнөөгийн 21-р зууны бэлгэ тэмдэг нь мэдээллийн урсгалд нэвтрэх боломжтой компьютерээр тоноглогдсон оффис юм.

Зөвшөөрөгдөх үнэ цэнэ нь жигд байдлыг хангадаг текстийг баруун, зүүн зэрэгцүүлэх, тэр бол өргөнөөр. Энэ аргыг хэвлэлтэд өргөн ашигладаг.

HTML дээрх текстийг гол болон зөвтгөхийн тулд зэрэгцүүлж байна

HTML хэл дээрх текстийг төвд, текстийг баруун тийш зэрэгцүүлнэ:

Үр дүн:

Шинж чанарууд ба үнэт зүйлс

• align="left" - тодорхойлно зүүн текстийн зэрэгцүүлэх(өгөгдмөл).
• тэгшлэх = "төв" - текстийг төв рүү зэрэгцүүлнэ.
• тэгшлэх = "баруун" текстийг баруун тийш зэрэгцүүлнэ.

Зохицуулах | HTML текстийн догол мөр

HTML текстхуудасны зүүн талд байгаа догол мөр

Үйлдвэрлэе текст доголзүүн талд хоёр аргаар:

Үр дүн:

Шинэ цонхонд харах.

Элементүүдийг хэвтээ ба босоо байдлаар тохируулах боломжтой янз бүрийн арга замууд. Аргын сонголт нь элементийн төрөл (блок эсвэл доторлогоо), түүний байрлал, хэмжээ гэх мэтээс хамаарна.

1. Блок / хуудасны төв рүү хэвтээ зэрэгцүүлэх

1.1. Хэрэв блок нь өргөнтэй бол:

div (өргөн: 300px; захын зай: 0 auto; /*элементийг эх блок дотор хэвтээ байдлаар төвлүүлнэ*/ )

Хэрэв та шугамын элементийг ингэж зэрэгцүүлэхийг хүсвэл дараах байдлаар харуулахаар тохируулах хэрэгтэй: блок;

1.2. Хэрэв блок өөр блок дотор оршдог бөгөөд түүнд зориулж ямар ч өргөн/өргөн тохируулаагүй бол:

.wrapper(текстийг зэрэгцүүлэх:төв;)

1.3. Хэрэв блок нь өргөнтэй бөгөөд үндсэн блокийн төвд бэхлэх шаардлагатай бол:

.wrapper (байрлал: харьцангуй; /*эцэг эх хайрцгийг харьцангуй байрлалд тохируулснаар бид хайрцгийг дараа нь дотор нь бүрэн байрлуулах боломжтой*/) .box ( өргөн: 400px; байрлал: үнэмлэхүй; зүүн: 50%; зүүн талын зай: - 200px; / *блокыг зүүн тийш нь түүний өргөний талтай тэнцүү зайд шилжүүлнэ*/ )

1.4. Хэрэв блокуудад өргөнийг тохируулаагүй бол та эх боодлын блокыг ашиглан төвлүүлж болно:

.wrapper (текстийг зэрэгцүүлэх: төвд; /*блокны агуулгыг голд оруулах*/) блокуудын хоорондох догол мөр*/ )

2. Босоо зэрэгцүүлэх

2.1. Хэрэв текст нэг мөр эзэлдэг бол, жишээлбэл, товчлуурууд болон цэсийн зүйлс:

.button (өндөр: 50px; шугамын өндөр: 50px; )

2.2. Блокыг эх блок дотор босоо байдлаар зэрэгцүүлэхийн тулд:

.wrapper (байрлал: харьцангуй;) .box (өндөр: 100px; байрлал: үнэмлэхүй; дээд: 50%; захын зай: -50px 0 0 0; )

2.3. Хүснэгтийн төрлөөр босоо зэрэгцүүлэх:

.wrapper (дэлгэц: хүснэгт; өргөн: 100%; ) .box (дэлгэц: хүснэгт-нүд; өндөр: 100px; текстийг зэрэгцүүлэх: төвд; босоогоор зэрэгцүүлэх: дунд; )

2.4. Хэрэв хайрцаг нь өргөн, өндрийг тохируулсан бөгөөд эцэг эхийн хайрцган дээр төвлөрсөн байх шаардлагатай бол:

.wrapper (байрлал: харьцангуй; ) .box (өндөр: 100px; өргөн: 100px; байрлал: үнэмлэхүй; дээд: 0; баруун: 0; доод: 0; зүүн: 0; зах: автомат; халих: автомат; /*to агуулга тархаагүй */ )

2.5. CSS3 хувиргалтыг ашиглан хуудас/блокны төв рүү үнэмлэхүй байршуулах:

хэрэв элемент хэмжээстэй бол

div (өргөн: 300px; /*блокны өргөнийг тохируулах*/ өндөр:100px; /*блокны өндрийг тохируулах*/ хувиргах: translate(-50%, -50%); байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50% ;)

хэрэв элемент нь хэмжээсгүй бөгөөд хоосон биш бол

h1 ( зах: 0; хувиргах: орчуулах(-50%, -50%); байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; )

2.5. Блокны үнэмлэхүй байрлал

хуудасны төвд

div (өргөн: 500px; өндөр: 100px; /* хэрэв өндрийг тодорхой заагаагүй бол 100% байх болно */ байрлал: үнэмлэхүй; дээд: 0; доод: 0; зүүн: 0; баруун: 0; зах: автомат ;)

блокийн төвд

.wrapper ( байрлал: үнэмлэхүй; ) .box ( өргөн: 100px; өндөр: 100px; /* хэрэв өндрийг тодорхой заагаагүй бол 100% байх болно */ байрлал: үнэмлэхүй; дээд: 0; доод: 0; зүүн: 0; баруун: 0; захын зай: автомат; )

Хөвөгч шинж чанартай контентыг хэвтээ байдлаар тохируулах нь маш хялбар бөгөөд бүрэн хөтчөөр ажилладаг (Opera 8+, Firefox 3+, IE 5.5+ дээр ажилладаг).

div блок зэрэгцүүлэх жишээ

Хөвөгч хайрцаг эсвэл олон давхарласан хайрцгийг зэрэгцүүлэхийн тулд өөр гаднах хайрцаг хэрэгтэй. Гаднах хайрцаг ба дотоод хайрцагт байрлалыг хуваарилсан: үнэмлэхүй; ба хөвөх: зүүн; , гаднах хуваарилалт зүүн: 50%; , мөн дотоод блокуудын баруун талд: 50%; . Хөвөгч ашиглахын тулд: баруун; та гадаад томилгооны эрх олгох хэрэгтэй: 50%; , болон дотоод блокууд зүүн: 50%; . Би тодорхой шинж чанартай блок байрлуулж хөвөгчийг цэвэрлэхийг зөвлөж байна: хоёулаа; төвд зэрэгцүүлсэн элементүүдийн дараа; .

Ингэснээр та дараах төвлөрөлд хүрч чадна.

ID = block-inner гэсэн дотоод блок нь ногоон хүрээтэй, id = блоктой гадна талын блок нь тасархай улаан хүрээтэй байна.

#блок (байрлал: харьцангуй; хөвөх: зүүн; зүүн: 50%; хүрээ: 1px тасархай #a00; ) #блок-дотоод (байрлал: харьцангуй; хөвөх: зүүн; баруун: 50%; хил: 2px хатуу #0a0; дүүргэгч : 10px; ) #хуудас (халих: далд; )

Цэсийн зүйлийг зэрэгцүүлэх жишээ

Практикт дээрх жишээг сайтын цэсийг хэвтээ байдлаар байрлуулах үед хэрэглэж болно. Гэсэн хэдий ч хангалттай хэмжээнд байгааг анхаарч үзэх хэрэгтэй олон тоогоорзүйлс (хуудасны өргөнөөс хагасаас илүү), хэвтээ гүйлгэх харагдана. Үүнээс салахын тулд гаднах блок дахь халих шинж чанарыг хэрэглэх хэрэгтэй. Хэрэв цэс доош унждаг бол түүний унадаг зүйлсийг энэ гаднах блокоор таслах боломжтой. Энэ асуудлаас зайлсхийхийн тулд халих шинж чанарыг блок руу аль болох хаах, жишээлбэл, гадаа нэгжХуудасны бүх агуулгыг багтаасан A.

Жишээлбэл, та цэсийг дараах байдлаар тохируулж болно.

ul жагсаалтын li зүйлүүд нь ногоон хүрээтэй, ул жагсаалт нь тасархай улаан хүрээтэй байна.

Доорх жишээний HTML код дараах байдалтай байна.

Доорх жишээний CSS код дараах байдалтай байна.

#цэс (байрлал: харьцангуй; хөвөх: зүүн; зүүн: 50%; хүрээ: 1px тасархай #a00; жагсаалтын хэв маяг: байхгүй; захын зай: 0; дэвсгэр: 0; ) # цэс li ( байрлал: харьцангуй; хөвөх: зүүн; баруун: 50%; хүрээ: 2px хатуу #0a0; дэвсгэр: 10px; ) #хуудас (халих: далд; )

Тиймээс энэ нь маш энгийн. Шинэ арга барил эзэмшихэд тань амжилт хүсье.

Windows : Internet Explorer 3.0+, Firefox 1.0+, Гүүгл Кром, Opera 3.51 - 6.xx ба 9.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ] .

линукс: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx ба 9.0+, SeaMonkey 1.0+ [ 2 ] .

HTML ашиглан хөтчийн цонхны харагдах хэсгийн төвд хуудасны агуулгыг зэрэгцүүлэх - CSS байхгүй. Вэб хуудасны агуулгыг байрлуулах чингэлэгийг өргөн ба өндрөөр нь голлон байрлуулна: [ Нээлттэй жишээ хуудас ].

Мөн Netscape 2.02 - 4.80 болон Offbyone дээр. Netscape 2.02 - 4.80 дээр хөтчийн цонхны харагдах хэсгийн зүүн дээд буланд хуудасны агуулгыг бага зэрэг шилжүүлж, эдгээр програмууд нь гүйлгэх самбарт зай нөөцлүүлдэг.

Мөн Netscape 2.02 - 4.80 дээр. Netscape 2.02 - 4.80 дээр хөтчийн цонхны харагдах хэсгийн зүүн дээд буланд хуудасны агуулгыг бага зэрэг шилжүүлж, эдгээр програмууд нь гүйлгэх самбарт зай нөөцлүүлдэг.

Хувцасны дэд хувилбарууд болон сэдэв

DOS дээр дэлгэцийн агшин авахын тулд хэд хэдэн програм байдаг. Жишээлбэл, SNARF. Энэхүү программыг ашигласнаар хамгийн олон тохиолдлын дэлгэцийн агшинг авах боломжтой болсон. Мөн SNARF-ийн хийсэн дэлгэцийн агшингийн чанар (.BMP файлууд) нь туршиж үзсэн програмуудаас хамгийн сайн нь юм: ScreenThief, VideoThief, FLIP, GRABBER, SNARF. SNARF-ийг анхдагч тохиргоотой ашиглах нь энгийн боловч сул тал бий - SNARF нь дэлгэцийн агшинг тухайн хэрэглэгчийн байгаа хавтсанд үргэлж хадгалдаг. Энэ нь тохиромжгүй эсвэл хүлээн зөвшөөрөгдөөгүй байж болох юм. Мөн үүнийг өөрчлөх тодорхой арга байхгүй. Гэсэн хэдий ч тойрон гарах арга зам бий. Анхны санааг энэ холбоосоос олсон. Үүний үндсэн дээр дараах үйл явдал болсон: 1. SNARF [ Татаж авах ] 2. Ашиглах текст засварлагч SNARF.EXE файлыг текст горимд нээж, snarf000.bmp-г олоод SNARF ажиллаж байх үед дэлгэцийн агшинг хадгалах s:scn000.bin хавтас болгон өөрчил. Хавтас болон түүнд хүрэх зам нь дурын байж болно: C:\SOFT\SNARF.EXE SUBST S: C:\SCREENS\ 4. SNARF: S [эсвэл S.BAT]-г ажиллуулна уу 5. Дэлгэцийн агшинг авахын тулд: Alt + S хоёр байх дуут дохио. Эхнийх нь эхэнд, хоёр дахь нь үйл явц амжилттай дууссаны шинж тэмдэг юм. Дэлгэцийн агшинг авсны дараа та хадгалсан хавтас руу орж файлын өргөтгөлийг .BIN-ээс .BMP SNARF - Freeware болгон өөрчлөх хэрэгтэй.

Текст болон зураг агуулсан блок элементийн CSS босоо байрлал. Блок болон доторлогооны элементүүдийн янз бүрийн хослолуудад ажиллана. Жишээ нь: CSS босоо зэрэглэл CSS босоо шугам HTML / XHTML. Код:

CSS. Код: .эцэг (байрлал: харьцангуй; зүүн: 0px; дээд: 0px; өндөр: 200px; дэлгэц: хүснэгт;) .хүүхэд (байршил: харьцангуй; зүүн: 0px; дээд: 0px; дэлгэц: хүснэгт-нүд; босоогоор зэрэгцүүлэх : дунд;) .childcontent (байрлал: харьцангуй; зүүн: 0px; дээд: 0px;) Тайлбар: .parent болон .childcontent нь зүүн тийш зэрэгцүүлэх ("хөвөгч: зүүн;") эсвэл зэрэгцүүлэхгүй, гэхдээ босоо байдлаар CSS зэрэгцүүлэхажилласан, .хүүхэд "хөвөгч: зүүн;"-гүй байх ёстой. [ 1 ] Мөн Netscape 6.01+, Mozilla 0.6+ дээр. [ 2 ] Мөн Netscape 6.01+, Mozilla 0.6+ дээр.