Хөтөчийн цонхны төвд зураг эсвэл текст оруулахад хэцүү зүйл байхгүй юм шиг санагдаж байна. Бид CENTER шошгыг ашигладаг бөгөөд бүх зүйл бидний хүссэн газартаа ордог. Гэсэн хэдий ч бүх зүйл тийм ч энгийн биш юм. Төвд зэрэгцүүлэх гурван арга байдаг бөгөөд тэдгээр нь тус бүр өөрийн онцлог шинж чанартай бөгөөд өөр өөр хөтөч дээр ялгаатай байдаг.

Хамгийн энгийн бөгөөд тохиромжтой шошгуудын нэг - CENTER нь текстийн блокийг зэрэгцүүлэх зориулалттай. Энэ шошгыг мөн зураг, хүснэгтийг голлоход ашиглаж болно. Үл хамаарах зүйл бол элементүүд юм эсвэл IMG тагийн шинж чанараар зэрэгцүүлэн тохируулна. Тиймээс хэрэв бид элемент байрлуулбал CENTER шошгон дотор зураг баруун тийш зэрэгцэнэ.

Жишээ 4.1. CENTER шошготой төвлөрсөн

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

Албан ёсоор CENTER-г зөвхөн бусад блок шошгонд (P, PRE болон бусад) параметр болгон ашиглах ёстой. Гэсэн хэдий ч Netscape Navigator 2.0 хөтөч дээр CENTER-ийг бие даасан шошго болгон нэвтрүүлсэн. Энэхүү нэмэлт нь блок шошгыг ашиглах үед гарч ирэх нэмэлт босоо дэвсгэрийг арилгах зорилготой юм. Хэрэв ТӨВ-ийн оронд текстийг догол мөр дотор байрлуулсан бол (

) , хэвтээ шугам болон энэ текстийн хооронд нэмэлт босоо дэвсгэр гарч ирнэ.

CENTER нь HTML тодорхойлолтын нэг хэсэг биш юм. "Албан ёсны" HTML форматлахТекстийн зэрэгцүүлэлтийг шошгоны шинж чанаруудаар хийх ёстой (жишээлбэл,

) эсвэл хэв маягийг ашиглах. Гэсэн хэдий ч энэ шошго оршин тогтнох эрхийг олж авсан. Гэсэн хэдий ч HTML 4 W3-ийн тодорхойлолтыг гаргаснаас хойш Консорциум нь CENTER шошгыг ашиглахаас зайлсхийхийг зөвлөж байна.

, жишээ 4.2-т үзүүлсэн шиг.

Жишээ 4.2. DIV шошготой төвлөрсөн

---

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

Жишээ 4.3. Загвараар төвлөрөх

Одоо та дээрхтэй P тагийг хэзээ ашиглах вэ
хэв маягтай бол догол мөрийн текстийг хөтчийн цонхны төвд зэрэгцүүлнэ

CSS дээр энгийн мэт санагдах зарим зүйлийг хийхэд тийм ч амар биш байдаг. Тэдгээрийн нэг нь тэгшитгэх, өөрөөр хэлбэл. нэг элементийг нөгөөтэй нь харьцуулахад тодорхой байдлаар байрлуулах шаардлагатай үед.

Энэ нийтлэлд элементүүдийг хэвтээ ба / эсвэл босоо байдлаар төвлөрүүлэх ажлыг хялбарчлахад туслах бэлэн шийдлүүдийг танилцуулж байна.

Тайлбар: шийдэл бүрийн доор заасан CSS код ажиллаж байгаа хувилбаруудыг харуулсан хөтчүүдийн жагсаалт байна.

CSS - Блокыг голд нь зэрэгцүүлнэ

1. Нэг блокийг нөгөө блокийн төв рүү зэрэгцүүлэх. Энэ тохиолдолд эхний болон хоёр дахь блок нь динамик хэмжээстэй байна.

Эцэг эх (байрлал: харьцангуй; ) .хүүхэд (байрлал: үнэмлэхүй; зүүн: 50%; дээд: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%) , -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Нэг блокийг нөгөө блокийн төв рүү зэрэгцүүлэх. Энэ тохиолдолд хоёр дахь блок нь тогтмол хэмжээтэй байна.

Эцэг эх (байрлал: харьцангуй; ) .хүүхэд (байрлал: үнэмлэхүй; зүүн: 50%; дээд: 50%; /* 2 блокийн өргөн ба өндөр */ өргөн: 500 пиксел; өндөр: 250 пиксел; /* Утга нь тодорхойлогдоно хэмжээн дээр */ /* зүүн талын захын = - өргөн / 2 */ зүүн талын ирмэг: -250px; /* захын дээд талд = - өндөр / 2 */ захын-дээд: -125px; )

Энэ шийдлийг дэмждэг хөтчүүд:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Нэг блокийг нөгөө блокийн төв рүү зэрэгцүүлэх. Энэ тохиолдолд хоёр дахь блок нь хувиар заасан хэмжээстэй байна.

Эцэг эх (байрлал: харьцангуй; ) .хүүхэд (байрлал: үнэмлэхүй; /* 2 хайрцагны өргөн ба өндөр% */ өндөр: 50%; өргөн: 50%; /* Утгыг түүний хэмжээнээс хамаарч% -аар тодорхойлно. */ зүүн: 25%; /* (100% - өргөн) / 2 */ дээд: 25%; /* (100% - өндөр) / 2 */ )

Энэ шийдлийг дэмждэг хөтчүүд:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontal Alignment

1. Нэг блок элементийг (дэлгэц: блок) нөгөөтэй нь (байрлаж байгаа) хэвтээ байдлаар зэрэгцүүлэх:

Блок (зүүн захаас: автомат; баруун захаас: автомат; )

Энэ шийдлийг дэмждэг хөтчүүд:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Inline (дэлгэц: inline) эсвэл inline-block (дэлгэц: inline-block) элементийг хэвтээ байдлаар зэрэгцүүлэх:

Эцэг эх (текстийг зэрэгцүүлэх: төвд; ) .хүүхэд (дэлгэц: inline-block; )

Энэ шийдлийг дэмждэг хөтчүүд:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Босоо зэрэгцүүлэх

1. Нэг элементийг (дэлгэц: inline , display: inline-block) нөгөөтэй нь (түүний байрлаж байгаа) төв хэсэгт төвлөрүүл. Энэ жишээн дээрх эх хайрцаг нь тогтмол өндөртэй бөгөөд үүнийг line-height CSS шинж чанарыг ашиглан тохируулдаг.

Эцэг эх ( шугамын өндөр: 500px; ) .хүүхэд (дэлгэц: inline-block; vertical-align: дунд; )

Энэ шийдлийг дэмждэг хөтчүүд:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Эцэг эхийг хүснэгтээр, хүүхдийг энэ хүснэгтийн нүдээр харуулах замаар нэг блокыг нөгөө блокоос босоогоор нь голлуул.

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

Энэ шийдлийг дэмждэг хөтчүүд:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.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.

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

Ул жагсаалтын 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-ийн тохируулга ажилласан, .child нь "float: left;"-гүй байх ёстой. [ 1 ] Мөн Netscape 6.01+, Mozilla 0.6+ дээр. [ 2 ] Мөн Netscape 6.01+, Mozilla 0.6+ дээр.

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

Таб. 1. Текстийг зэрэгцүүлэх арга замууд

Зүүн зэрэгцүүлэх	Зөв тохируулга	Төвийн байрлал	Зөвтгөх
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Догол мөрийг ихэвчлэн текстийн зэрэгцүүлэхэд ашигладаг.

Align шинж чанар нь зэрэгцүүлэх аргыг зааж өгдөг. Мөн шошгыг ашиглан текстийн блокийг зэрэгцүүлэхийг зөвшөөрнө