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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS-ийн тусламжтайгаар элементүүдийг босоо байдлаар төвлөрүүлэх нь хөгжүүлэгчдэд бэрхшээлтэй байдаг. Гэсэн хэдий ч үүнийг шийдвэрлэх хэд хэдэн арга байдаг бөгөөд тэдгээр нь маш энгийн байдаг. Энэ хичээлд агуулгыг босоо байдлаар төвлөрүүлэх 6 сонголтыг үзүүлэв.

Асуудлын ерөнхий тайлбараас эхэлье.

Босоо төвийн асуудал

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

Ихэнх хүмүүс text-align: шинж чанарыг ашиглахдаа босоо төвийг сахихдаа vertical-align шинж чанарыг харна. Бүх зүйл нэлээд логик харагдаж байна. Хэрэв та хүснэгтийн загваруудыг ашигласан бол valign шинж чанарыг өргөнөөр ашигласан байх магадлалтай бөгөөд энэ нь босоо байрлалтай байх нь зөв арга юм гэсэн итгэлийг бататгаж байна.

Гэхдээ valign шинж чанар нь зөвхөн хүснэгтийн нүднүүдэд ажилладаг. Мөн vertical-align шинж чанар нь маш төстэй юм. Энэ нь мөн хүснэгтийн нүднүүд болон зарим доторлогооны элементүүдэд нөлөөлдөг.

vertical-align шинж чанарын утга нь үндсэн шугамын элементтэй харьцангуй юм.

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

Гэвч харамсалтай нь босоо тэгшлэх шинж чанар нь блок түвшний элементүүдэд (div элементийн догол мөр гэх мэт) ажиллахгүй. Энэ байдал нь босоо тэнхлэгийн асуудлыг шийдэх боломжгүй гэсэн санааг төрүүлж магадгүй юм.

Гэхдээ блок түвшний элементүүдийг төвлөрүүлэх өөр аргууд байдаг бөгөөд тэдгээрийн сонголт нь гаднах савтай холбоотой юуг төвлөрүүлж байгаагаас хамаарна.

шугамын өндөр арга

Энэ арга нь текстийн нэг мөрийг босоо байдлаар голлуулахыг хүссэн үед ажиллана. Таны хийх ёстой зүйл бол мөрийн өндрийг үсгийн хэмжээнээс том болгоход л хангалттай.

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

HTML:

CSS:

#хүүхэд (мөрийн өндөр: 200px; )

Энэ арга нь зөвхөн нэг мөрөнд ашиглагдах боломжтой боловч бүх хөтөч дээр ажилладаг. Жишээн дээрх 200 px-ийн утгыг дур зоргоороо сонгосон. Та текстийн үсгийн хэмжээнээс том ямар ч утгыг ашиглаж болно.

Шугамын өндөртэй зургийг голлуул

Хэрэв контент нь зураг байвал яах вэ? Дээрх арга ажиллах уу? Хариулт нь CSS кодын өөр мөрөнд оршдог.

HTML:

CSS:

#parent ( мөрийн өндөр: 200px; ) #parent img ( босоо зэрэгцүүлэх: дунд; )

Line-height шинж чанарын утга нь зургийн өндрөөс их байх ёстой.

CSS хүснэгтийн арга

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

Жич: CSS хүснэгт нь HTML хүснэгттэй адил биш юм.

HTML:

CSS:

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

Бид хүснэгтийн гаралтыг эх div-д тохируулж, үүрлэсэн div-г хүснэгтийн нүд болгон гаргадаг. Одоо та дотоод саванд vertical-align шинж чанарыг ашиглаж болно. Түүний доторх бүх зүйл босоо чиглэлд төвлөрөх болно.

Дээрх аргаас ялгаатай нь энэ тохиолдолд div элемент нь агуулгадаа тохируулан хэмжээг нь өөрчлөх тул агуулга нь динамик байж болно.

Энэ аргын сул тал нь IE-ийн хуучин хувилбаруудад ажиллахгүй байгаа явдал юм. Та үүрлэсэн савны хувьд дэлгэцийн: inline-block шинж чанарыг ашиглах ёстой.

Үнэмлэхүй байрлал ба сөрөг зөрүү

Энэ арга нь бүх хөтөч дээр ажилладаг. Гэхдээ энэ нь төвлөрсөн элементийг өндөрт өгөхийг шаарддаг.

Жишээ код нь хэвтээ болон босоо төвлөлтийг нэгэн зэрэг гүйцэтгэдэг:

HTML:

CSS:

#эцэг эх (байрлал: харьцангуй;) #хүүхэд (байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; өндөр: 30%; өргөн: 50%; зах: -15% 0 0 -25%; )

Эхлээд бид элементүүдийн байршлын төрлийг тохируулна. Дараа нь үүрлэсэн div дээр дээд ба зүүн шинж чанаруудыг 50% болгож тохируулна. Энэ нь эх элементийн төв юм. Гэхдээ үүрлэсэн элементийн зүүн дээд буланд төвлөрдөг. Тиймээс, та үүнийг дээш өргөх хэрэгтэй (тэн хагас нь) зүүн тийш (өргөнийн тал) хөдөлж, дараа нь төв нь эх элементийн төвтэй давхцах болно. Тиймээс энэ тохиолдолд элементийн өндрийг мэдэх нь зайлшгүй шаардлагатай. Дараа нь бид элементийн өндөр ба өргөний хагастай тэнцүү сөрөг дээд ба зүүн захын зайг өгнө.

Энэ арга нь бүх хөтөч дээр ажиллахгүй.

Үнэмлэхүй байрлал, сунгалт

Жишээ код нь босоо болон хэвтээ төвлөрлийг гүйцэтгэдэг.

HTML:

CSS:

#эцэг эх (байрлал: харьцангуй;) #хүүхэд (байрлал: үнэмлэхүй; дээд: 0; доод: 0; зүүн: 0; баруун: 0; өргөн: 50%; өндөр: 30%; зах: автомат; )

Энэ аргын цаад санаа нь дээд, доод, баруун, зүүн шинж чанаруудыг 0 болгож эх элементийн бүх 4 хүрээ хүртэл үүрлэсэн элементийг сунгах явдал юм.

Бүх талын захын зайг автоматаар тохируулснаар бүх 4 талын утгыг тэнцүү болгож, бидний оруулсан div элементийг эх элементийн төв рүү авчрах болно.

Харамсалтай нь энэ арга нь IE7 болон түүнээс доош хувилбаруудад ажиллахгүй.

Дээд болон доод талын тэгш дүүргэлт

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

HTML:

CSS:

#parent ( padding: 5% 0; ) #child ( padding: 10% 0; )

Жишээ нь CSS кодонд дээд ба доод дэвсгэрийг хоёр элементийн хувьд тохируулсан. Оруулсан элементийн хувьд дэвсгэрийг тохируулах нь босоо байдлаар голлуулах болно. Мөн эцэг эхийн элементийн дэвсгэр нь доторх үүрлэсэн элементийг төвлөрүүлнэ.

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

Жишээлбэл, эх элементийн өндөр нь 400 пиксел, үүрлэсэн элемент нь 100 пикселийн өндөртэй бол дээд ба доод хэсэгт 150 пикселийн дүүргэлт шаардлагатай.

150 + 150 + 100 = 400

% ашиглах нь тооцооллыг хөтөч дээр үлдээх боломжийг олгоно.

Энэ арга нь хаа сайгүй ажилладаг. Сул тал нь тооцоо хийх хэрэгцээ юм.

Жич:Энэ арга нь элементийн ирмэгийг тохируулах замаар ажилладаг. Та мөн элемент доторх захын зайг ашиглаж болно. Төслийн онцлогоос хамааран захын зай эсвэл дүүргэлт хийх шийдвэрийг гаргах ёстой.

хөвөгч див

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

HTML:

CSS:

#parent (өндөр: 250px;) #floater ( хөвөх: зүүн; өндөр: 50%; өргөн: 100%; доод талын зай: -50px; ) #хүүхэд (тодорхой: хоёулаа; өндөр: 100px; )

Бид хоосон div-г зүүн эсвэл баруун тийш шилжүүлж, үндсэн элементийн 50% -ийн өндрийг өгнө. Ингэснээр энэ нь эх элементийн дээд талыг дүүргэх болно.

Энэ div нь хөвж байгаа тул баримт бичгийн хэвийн урсгалаас хасагдсан бөгөөд бид үүрлэсэн элементийг задлах хэрэгтэй. Жишээ нь clear: both -г ашигладаг боловч хөвөгч хоосон div элементийн офсеттэй ижил чиглэлийг ашиглахад хангалттай.

Суурилуулсан div элементийн дээд хүрээ нь хоосон div элементийн доод хилийн доор байна. Бид үүрлэсэн элементийг хөвөгч хоосон элементийн өндрийн хагасаар дээш шилжүүлэх хэрэгтэй. Асуудлыг шийдэхийн тулд хөвөгч хоосон div элементийн margin-boottom шинж чанарын сөрөг утгыг ашиглана.

Энэ арга нь бүх хөтөч дээр ажилладаг. Гэсэн хэдий ч үүнийг ашиглахын тулд нэмэлт хоосон div элемент болон үүрлэсэн элементийн өндрийг мэдэх шаардлагатай.

Дүгнэлт

Тайлбарласан бүх аргууд нь хэрэглэхэд хялбар байдаг. Эдгээрийн аль нь ч бүх тохиолдолд тохиромжгүй байдагт бэрхшээлтэй байдаг. Төсөлд дүн шинжилгээ хийж, шаардлагад хамгийн сайн тохирохыг сонгох шаардлагатай.

Ихэнхдээ даалгавар бол блокийг хуудасны / дэлгэцийн төв хэсэгт байрлуулах, тэр ч байтугай java скриптгүйгээр, хатуу хэмжээ, сөрөг догол мөрийг тохируулахгүйгээр, хэрэв блок хэмжээнээс хэтэрсэн тохиолдолд гүйлгэх мөрүүд эцэг эх дээр ажиллах болно. Сүлжээнд блокыг дэлгэцийн төв рүү хэрхэн тэгшлэх тухай олон тооны нэгэн хэвийн жишээнүүд байдаг. Дүрмээр бол тэдгээрийн ихэнх нь ижил зарчим дээр суурилдаг.

Асуудлыг шийдвэрлэх гол арга замууд, тэдгээрийн давуу болон сул талуудыг доор харуулав. Жишээнүүдийн мөн чанарыг ойлгохын тулд би заасан холбоос дээрх жишээн дэх Үр дүнгийн цонхны өндөр / өргөнийг багасгахыг зөвлөж байна.

Сонголт 1. Сөрөг дэвсгэр.

Байршил блокдээд ба зүүн шинж чанаруудыг 50% -иар бууруулж, блокийн өндөр, өргөнийг урьдчилан мэдэж, хагас хэмжээтэй тэнцэх сөрөг зайг тогтооно. блок. Энэ сонголтын маш том сул тал бол та сөрөг догол мөрийг тоолох хэрэгтэй. Нэг арга зам блокгүйлгэх самбаруудын орчинд тийм ч буруу ажилладаг - энэ нь сөрөг доголтой тул зүгээр л таслагдсан.

Эцэг эх ( өргөн: 100%; өндөр: 100%; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; халих: автомат; ) .block ( өргөн: 250 пиксел; өндөр: 250 пиксел; байрлал: үнэмлэхүй; дээд: 50%; зүүн : 50%; зах: -125px 0 0 -125px; img (хамгийн их өргөн: 100%; өндөр: автомат; дэлгэц: блок; зах: 0 автомат; хүрээ: байхгүй; ) )

Сонголт 2: Автомат догол мөр.

Бага түгээмэл боловч эхнийхтэй төстэй. Учир нь блокөргөн ба өндрийг тохируулж, баруун дээд доод зүүн шинж чанаруудыг 0 болгож, автомат маржинг тохируулна уу. Энэ сонголтын давуу тал нь ажиллах гүйлгэх самбарууд юм эцэг эх, хэрэв сүүлийнх нь 100% өргөн ба өндөртэй бол. Энэ аргын сул тал бол хатуу хэмжээс юм.

Эцэг эх ( өргөн: 100%; өндөр: 100%; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; халих: автомат; ) .block ( өргөн: 250 пиксел; өндөр: 250 пиксел; байрлал: үнэмлэхүй; дээд: 0; баруун: 0; доод: 0; зүүн: 0; зах: автомат; img (хамгийн өргөн: 100%; өндөр: автомат; дэлгэц: блок; зах: 0 автомат; хил: байхгүй; ) )

Сонголт 3. Хүснэгт.

Бид асууж байна эцэг эххүснэгтийн хэв маяг, нүд эцэг эхТекстийн зэрэгцүүлэлтийг төвд тохируулна уу. А блок inline блок загварыг тохируулах. Сул талууд нь гүйлгэх самбарууд ажиллахгүй, ерөнхийдөө хүснэгтийн "дууриамал" -ын гоо зүй биш юм.

Эцэг эх ( өргөн: 100%; өндөр: 100%; дэлгэц: хүснэгт; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; > .дотоод ( дэлгэц: хүснэгтийн нүд; текстийг зэрэгцүүлэх: төв; босоогоор зэрэгцүүлэх: дунд; ) ) .block (дэлгэц: inline-block; img (дэлгэц: блок; хил: байхгүй; ) )

Энэ жишээнд гүйлгэх зүйл нэмэхийн тулд бүтцэд дахин нэг элемент нэмэх шаардлагатай болно.
Жишээ: jsfiddle.net/serdidg/fk5nqh52/3 .

Сонголт 4. Псевдо-элемент.

Энэ сонголт нь өмнөх аргуудад дурдсан бүх асуудлуудаас ангид бөгөөд анхны даалгавруудыг шийддэг. Гол нь байх ёстой эцэг эххэв маягийг тохируулах псевдо элементөмнө нь, тухайлбал 100% өндөр, төвд зэрэгцүүлэх болон доторлогооны хайрцагны загвар. Үүнтэй адил блокдоторлогооны блокийн загварыг тавих, төв рүү чиглүүлэх. руу блокунасангүй псевдо элементЭхнийх нь хэмжээсүүд нь -ээс их байх үед эцэг эх, зааж өгнө үү эцэг эх white-space: nowrap болон font-size: 0, үүний дараа y блокЭдгээр хэв маягийг дараах байдлаар цуцална - white-space: normal. Энэ жишээн дээр үүссэн зайг арилгахын тулд font-size: 0 шаардлагатай эцэг эхболон блоккодын форматтай холбоотой. Цоорхойг өөр аргаар арилгаж болно, гэхдээ үүнийг зүгээр л зөвшөөрөхгүй байх нь хамгийн сайн арга юм.

Эцэг эх (өргөн: 100%; өндөр: 100%; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; халих: автомат; хоосон зай: nowrap; текстийг зэрэгцүүлэх: төв; үсгийн хэмжээ: 0; &: өмнө ( өндөр: 100%; дэлгэц: доторлогоотой; босоо байдлаар: дунд ; img (дэлгэц: блок; хил: байхгүй; ) )

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

Эцэг эх (байрлал: тогтмол; дээд: 0; баруун: 0; доод: 0; зүүн: 0; халих: автомат; цагаан зай: nowrap; текстийг зэрэгцүүлэх: төв; үсгийн хэмжээ: 0; &: өмнө ( өндөр: 100%; дэлгэц: доторлогоотой; босоо байдлаар: дунд (дэлгэц: блок; хил: байхгүй; ))

Сонголт 5. Flexbox.

Хамгийн энгийн бөгөөд гоёмсог аргуудын нэг бол flexbox ашиглах явдал юм. Энэ нь биеийн шаардлагагүй хөдөлгөөн шаарддаггүй, болж буй зүйлийн мөн чанарыг нэлээд тодорхой дүрсэлсэн, уян хатан чанар өндөртэй байдаг. Энэ аргыг сонгохдоо санах ёстой цорын ганц зүйл бол IE-ийн 10-р хувилбарыг багтаасан дэмжлэг юм. caniuse.com/#feat=flexbox

Эцэг эх (өргөн: 100%; өндөр: 100%; байрлал: тогтмол; дээд: 0; зүүн: 0; дэлгэц: уян хатан; align-items: төвд; align-content: center; justify-content: center; overflow: auto; ) .block (арын дэвсгэр: #60a839; img (дэлгэц: блок; хил: байхгүй; ) )

Сонголт 6. Transform.

Хэрэв бид бүтцээр хязгаарлагдаж, үндсэн элементийг удирдах арга байхгүй бол тохиромжтой, гэхдээ блокыг ямар нэгэн байдлаар тохируулах шаардлагатай. Translate() css функц аврах ажилд ирнэ. Үнэмлэхүй байрлалын 50%-ийн утга нь хайрцагны зүүн дээд буланг яг голд нь байрлуулж, сөрөг орчуулгын утга нь хайрцгийг өөрийн хэмжээстэй харьцуулан зөөнө. Сөрөг нөлөө нь бүдгэрсэн ирмэг эсвэл үсгийн хэв маягаар илэрч болохыг анхаарна уу. Мөн ижил төстэй арга нь java-script "a" ашиглан блокийн байрлалыг тооцоолоход асуудал үүсгэдэг. Заримдаа зүүн css шинж чанарыг ашигласны улмаас өргөний 50% -ийн алдагдлыг нөхөхийн тулд дүрэм нь блок нь туслах болно: margin-right: -50%; .

Эцэг эх ( өргөн: 100%; өндөр: 100%; байрлал: тогтмол; дээд: 0; зүүн: 0; халих: автомат; ) .block ( байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; хувиргах: орчуулах( -50%, -50%); img (дэлгэц: блок; ) )

Сонголт 7. Товчлуур.

Хэрэглэгчийн azproduction сонголт хаана блоктовчлуурын шошгонд ороосон. Товчлуур нь доторх бүх зүйлийг, тухайлбал, шугамын болон блок-мөр (inline-блок) загварын элементүүдийг төвлөрүүлэх чадвартай. Би үүнийг практик дээр санал болгодоггүй.

Эцэг эх ( өргөн: 100%; өндөр: 100%; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; халих: автомат; дэвсгэр: байхгүй; хүрээ: байхгүй; тойм: байхгүй; ) .block ( дэлгэц: inline-block; img (дэлгэц: блок;; хил: байхгүй; ) )

Бонус

4-р сонголтын санааг ашиглан та захын зайг тохируулж болно блок, мөн үүнтэй зэрэгцэн сүүлийнх нь гүйлгэх самбаруудын орчинд хангалттай харагдах болно.
Жишээ: jsfiddle.net/serdidg/nfqg9rza/2 .

Та мөн зургийг голд нь тааруулж, хэрэв зураг том бол эцэг эх, хэмжээг нь тохируулна уу эцэг эх.
Жишээ: jsfiddle.net/serdidg/nfqg9rza/3 .
Том зургийн жишээ:

Хэрэв та html дээр суурилсан аливаа сайтыг хайчилж авбал тодорхой давхаргат бүтцийг харах болно. Түүнээс гадна, гадаад төрхөөрөө энэ нь давхаргын бялуутай төстэй байх болно. Хэрэв та тэгж бодож байгаа бол та удаан хугацаанд идээгүй байх магадлалтай. Тиймээс эхлээд өлсгөлөнгөө тайл, дараа нь бид таны сайт дээрх div давхаргыг хэрхэн голлуулахыг танд үзүүлэх болно:

Шошго ашиглан зохион байгуулалтын ашиг тус

Талбайн барилгын хоёр үндсэн төрөл байдаг:

• хүснэгт;
• Блоклох.

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

Хүснэгтийн бүдүүвчийг ашиглах үед вэб хуудсыг бүрэн ачаалах хүртэл харуулахгүй. Харин div блокуудыг ашиглах үед элементүүдийг шууд харуулдаг.

Ачаалах өндөр хурдаас гадна сайтыг блоклох нь html кодын хэмжээг хэд дахин багасгах боломжийг олгодог. Үүнд CSS ангиудыг ашиглах замаар.

Гэсэн хэдий ч, хуудсан дээрх өгөгдлийг харуулах бүтцийг бий болгохын тулд хүснэгтийн байршлыг ашиглах ёстой. Үүнийг ашиглах сонгодог жишээ бол хүснэгтүүдийг харуулах явдал юм.

Шошго дээр үндэслэн барилга байгууламжийг блоклох