CSS: Босоо текст зэрэгцүүлэх. Элементүүдийг тэгшлэх

Асуудлын мэдэгдэл: Блок элементийн доторх шугаман эсвэл дотортой блокийн элементүүдийн босоо байрлалыг тохируулах шаардлагатай.

Асуудлыг шийдвэрлэх арга замууд. Янз бүрийн арга байдаг бөгөөд голыг нь авч үзье.

1. Блок элементийг хүснэгтийн нүдээр харуулах (дэлгэц: хүснэгт-нүд).
2. IE6-7: илэрхийлэх арга.
3. Мөр хоорондын зай (мөрний өндрийн шинж чанар) ба блокийн өндрийг (нэг мөрийн элементүүдийн хувьд) тэнцүүлэх.
4. Гадны блоктой байрлал тогтоох (байрлал: үнэмлэхүй).

За, нэгтгэн дүгнэхэд өөр аргыг авч үзье.

5. Vertical-align шинж чанарыг ашиглан тэгшлэх.

дэлгэц: хүснэгт-нүд

Босоо зэрэгцүүлэхийн тулд дэлгэцийн: table-cell шинж чанарыг эх блокт ашигладаг бөгөөд энэ нь элементийг хүснэгтийн нүдийг дуурайлган хийдэг. Өндөр болон босоо зэрэгцүүлэх: дундыг мөн үүнд тохируулсан:

Давуу тал:

• Энгийн байдал;
• Ганц болон олон мөрийг зэрэгцүүлнэ.

Сул талууд:

• IE7 болон түүнээс доош хувилбаруудад ажиллахгүй;
• Нэмэлт бүтэцгүйгээр гаднах хэсгийн хэвтээ байрлалыг удирдахад хэцүү байдаг;
• Display: table-cell ашиглах нь хүн бүрт таалагддаггүй.

IE6-7: илэрхийлэх арга

Учир нь өмнөх арга нь IE6-7 дээр ажиллахгүй байгаа бол та энэ асуудлыг засах хэрэгтэй.

Илэрхийлэл - загварын хуудсанд байрлуулсан, нэг удаа хийгдэх, зөвхөн IE дээр ажилладаг JS кодын богино хэсгүүд. Илэрхийлэл буруу байна. IE6 ба 7-ийн загварын файлуудын өмнөх жишээнд дараах кодын хэсгийг нэмнэ үү:

Ороогч p (z-индекс: илэрхийлэл (runtimeStyle.zIndex = 1, энэ == ((200/2) -parseInt (offsetHeight) / 2)< 0 ? style.marginTop="0" : style.marginTop=(200/2)-(parseInt(offsetHeight)/2) +"px"); }

Гавьяа, муу талыг тооцох нь утгагүй юм, tk. Энэ арга нь IE6-7-ийн эхнийхийг нөхөхөөс өөр давуу тал байхгүй, гэхдээ үүнээс хойш Эдгээр хөтчүүд аль хэдийн хуучирсан тул та нүдээ аниад үзэх боломжтой.

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

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

Давуу тал:

• Энгийн байдал;
• Хөтөч хоорондын нийцтэй байдал.

Сул талууд:

• Зөвхөн нэг шугамын элементүүдэд тохиромжтой;
• Зөвхөн төвд зэрэгцүүлэхийг зөвшөөрдөг.

байрлал болон сөрөг маржин дээшилнэ

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

Давуу тал:

• Хөтөч хоорондын нийцтэй байдал;
• Та элементүүдийг төвд эсвэл өөр байрлалд зэрэгцүүлж болно.

Сул талууд:

• Олон тооны элементүүдтэй цаг хугацаа шаардсан;
• Удирдахад хэцүү;
• Та элементийн өндрийг мэдэж, засах хэрэгтэй;
• Зарим хөтчүүдэд үнэмлэхүй байрлал нь гүйцэтгэлийн доройтолд хүргэдэг.

Алдартай аргуудын доод шугам

Таны харж байгаагаар эдгээр аргууд нь бүх нийтийнх биш бөгөөд тэдгээр нь тус бүр нь жижиг боловч сул талуудтай байдаг. Дэлгэц: хүснэгт-cell арга нь хамгийн уян хатан арга болж хувирсан, гэхдээ энэ нь надад хэзээ ч таалагдаагүй бөгөөд үүнээс гадна бид IE6-7-ийн дэмжлэгийг маш удаан хугацаанд орхиогүй. Тиймээс илүү түгээмэл зүйл дээр ажиллах шаардлагатай болсон. Aligning with vertical-align-ийг анхаарч үзээрэй.

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

Таны мэдэж байгаагаар vertical-align шинж чанар нь блокийн элементүүдэд тохирохгүй тул тэдгээрт энэ шинж чанарыг ашиглах нь ашиггүй юм. Гэсэн хэдий ч, энэ шинж чанар нь inline болон inline-block элементүүдэд сайн ажилладаг. Хэрэв бид энэ шинж чанарыг блок элемент доторх элементүүдэд хэрэглэхийг оролдвол дараах зургийг авна.

Таны харж байгаагаар элементүүд нь бүхэл бүтэн блок биш, харин шугамтай харьцуулахад нийцэж байгаа нь бидний хувьд тохиромжгүй юм. Дараа нь гадна блокийн өндөртэй тэнцүү өндөртэй элементийг блок дотор нэмэхийг оролдъё (дотор элементийн хувьд өндрийг тохируулах боломжгүй тул элемент нь inline-block байх ёстой). Нэмэх (доорх зурган дээр үүнийг саарал шугамаар харуулсан) бид дараахийг авна.

Бүх элементүүдэд тохируулцгаая босоо зэрэгцүүлэх: дунд.

За, бид нэг мөрийг ингэж голлосон. Хэрэв танд олон мөр хэрэгтэй бол яах вэ? Мөн энд ямар ч асуудал байхгүй. Та зүгээр л текстийн элементүүдийн хувьд display: inline-block-ийг тохируулах хэрэгтэй:

Хэрэв IE-ийн хуучин хувилбаруудтай нийцтэй байх нь бидний хувьд чухал биш бол элемент Бид түүний хэв маягийг устгаж, солих боломжтой:

Боодол: дараа (агуулга: ""; дэлгэц: inline-block; өндөр: 100%; өргөн: 0px; халих: далд; босоо зэрэгцүүлэх: дунд;)

Анхаарах хэд хэдэн зүйл байна:

• Зэрэгцсэн элементүүдийг хөвөх боломжгүй.
• Зэргэлдээх блокийн элементүүдийн хооронд үргэлж зай байдаг тул тэдгээрийг бие биенийхээ эсрэг дарах шаардлагатай бол гаднах блокийн хувьд та үсгийн хэмжээг тохируулах хэрэгтэй: 0px; мөн хүссэн утгыг тохируулах замаар элементүүдийг өөрсдөө сэргээнэ.
• Ийм байдлаар дотоод элементүүдийн хувьд та ижил утгуудыг (дээд, доод эсвэл дунд) болон өөр өөр утгуудыг тохируулж болно.

Давуу тал:

Сайтын хайлтын системийг сурталчлахад сар бүр төлбөр хийх хэрэгцээ. Үүний үр дүнтэй сурталчилгаа, ажлын өртөг нь сайт дээрх гол ажил
Би сайтынхаа сурталчилгааны төлбөрийг нэг удаа төлж, өрсөлдөөнт асуултуудын хайлтын үр дүнд үргэлж өндөр байхыг хүсч байна, энэ боломжтой юу?

Замын хөдөлгөөний сурталчилгаа: хэрэглэгчийн асуулт, хариулт
Вэбсайтыг сурталчлах талаар хэд хэдэн асуулт байна. Тарифын нюансууд, ажлын өртгийн тооцоо, захиалгын хураамж.

Вэб аналитик дээр байнга асуудаг асуултууд (FAQ)
Вэб аналитик үйлчилгээний үйлчлүүлэгчдээс байнга асуудаг асуултууд болон уг үйлчилгээг үзүүлэх талаар. Вэб аналитик гэж юу вэ? Төсөлд яагаад вэб аналитик хэрэгтэй байна вэ? Та яагаад KPI-ийг тодорхойлох хэрэгтэй вэ, тэдгээр нь юу вэ? гэх мэт.

"Pixel Plus"-д сурталчилгаа хийх тохиолдолд ямар төрлийн ажлыг SEO-д оруулаагүй вэ?
Хайлтын системийн оновчлол нь хамгийн их үр дүнд хүрэхийн тулд шаардлагатай ажлын том жагсаалтыг агуулдаг ... Гэхдээ SEO-ийн төлбөрт ямар төрлийн ажил ороогүй вэ?

Вэбсайтыг сурталчлах текстийн бэлэн байдал, хайлтын асуулгад зориулсан SEO текстийг оновчтой болгох
Яагаад танд сайт дээр текст хэрэгтэй байна вэ? Хэн ч уншдаггүй!

Сайтын сурталчилгааны үр дүнд өөрчлөлт оруулах хугацаа, Yandex (Yandex) вэбсайт дахь өөрчлөлтөд хариу өгөх хурд
Би сайтын сурталчилгааны үйлчилгээний төлбөрийг нэг сарын турш төлсөн. 10 хоног өнгөрч, Yandex дахь байр суурь сайжрахгүй байна, та тэнд ажилладаг уу, үгүй ​​юу?

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

Гэхдээ үндэслэлтэй асуулт гарч ирж байна, шаардлагагүй шошго бүхий хуудасны тэмдэглэгээг хэт ачаалахгүйгээр хүснэгтгүйгээр хийх боломжтой юу? Хариулт нь "та чадна" гэсэн боловч MSIE хөтчөөр CSS-ийг муу дэмждэг тул асуудлын шийдэл нь бусад нийтлэг хөтчүүдийн шийдлээс ялгаатай байх болно.

Жишээ болгон дараах хэсгийг авч үзье.

мөн текстийг хайрцгийн төв болон доод хэсэгт босоо байдлаар байрлуулахыг оролдоорой.

Асуудлын шийдэл

"Зөв" хөтчүүд (үүнд MSIE

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

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

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

Internet Explorer (7 хүртэлх хувилбарыг багтаасан)

MSIE дахь блокийн доод ирмэгтэй текстийг зэрэгцүүлэх асуудлыг шийдэхийн тулд та үнэмлэхүй байрлалыг ашиглаж болно (энд бидэнд блок дотор байрлуулсан доторлогооны элемент хэрэгтэй):

div (
албан тушаал: харьцангуй;
}
div span (
дэлгэц: блок;
байрлал: үнэмлэхүй;
доод: 0%;
зүүн: 0%;
өргөн: 100%;
}

Энэхүү дүрмийн багц нь "зөв" хөтөч дээр бас ажилладаг.

Шинж чанаруудыг зааж өгнө үү

Div span (
дэлгэц: блок;
өргөн: 100%;
}

шаардлагагүй, гэхдээ хэрэв та босоо текстээс гадна хэвтээ зэрэглэлийг ашиглахаар төлөвлөж байгаа бол шаардлагатай байж болно, жишээлбэл, текстийг тэгшитгэх: төв;

Блокны төв хэсэгт текстийг босоо байдлаар байрлуулахын тулд анхны фрагмент нь төвөгтэй хэвээр байх болно - бид өөр нэг мөр элементийг оруулах болно:

Сургалтын материал:

• CSS дээр босоо төвлөрөл (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• CSS ашиглан босоо төвлөрөл (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Босоо зэрэгцүүлэх (www.cssplay.co.uk/ie/valign.html)
• vertical-align: дунд (cssing.org.ua/2005/07/14/vertical-align-middle/)
• CSS-ийг босоо байдлаар тохируулах өөр нэг арга (cssing.org.ua/2007/04/26/another-css-valign-method)

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

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

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

Шугамын өндөртэй эхний арга

Эхний арга нь энгийн бөгөөд зарим талаараа энгийн бөгөөд сул талуудтай тул хэрэглэхэд хязгаарлалт байх болно. Сайтын html хуудсыг кодлохдоо текстийн агуулгын мөр хоорондын зай нь ихэвчлэн анхдагч хэвээр үлддэг шинж чанаруудын нэг байж магадгүй юм. Ерөнхийдөө бид шугамын өндрийг өөрөө тохируулах хэрэгтэй бөгөөд энэ нь хаана байгаа блоктой ижил өндөртэй ирдэг шугамын өндөр өмч.

CSS

Constutesim_first (
хил: 2px хатуу # bf1515;
өндөр: 175px;
}
.constutesim_first> p (
шугамын өндөр: 175px;
захын зай: 0;
текстийг зэрэгцүүлэх: төв;
дэвсгэр: 0;
үсгийн хэмжээ: 17px;
өнгө: # 3152a0;
font-family: Tahoma;
үсгийн жин: тод;
}

Түүнчлэн, бодит байдал дээр бүх зүйл хэрхэн харагдахыг шууд харж болно.

Үүнтэй төстэй аргаар дүрсийг хэрхэн ил гаргахыг хэрэгжүүлэх боломжтой бөгөөд энэ нь төвд, мэдээжийн хэрэг босоо байрлалд байх болно. Энэ нь зөвхөн нэг өмчийг бүртгүүлэхэд л үлддэг vertical-align: дунд; дүрсийг харуулах үүрэгтэй.

CSS

Хоёрдахь хувилбар (
хил: 2px хатуу улаан;
шугамын өндөр: 158px;
}

Хоёр дахь хувилбар div (
текстийг зэрэгцүүлэх: төв;
}
.хоёр дахь хувилбар img (
босоо зэрэгцүүлэх: дунд;
хил: 0px хатуу # 3a3838;
}

Бид төв болон босоо чиглэлд зургийг хэрэгжүүлдэг.

Байршлын шинж чанартай нийцүүлэх

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

CSS

Өрсөлдөгч сонголт (
хил: 2px хатуу # d40e0e;
өндөр: 162px;
албан тушаал: харьцангуй;
}
.competaird-option div (
байрлал: үнэмлэхүй;
дээд: 50%;
зүүн: 50%;
өндөр: 28%;
өргөн: 49%;
маржин: -2% 0 0 -25%;
хил: 2px хатуу # 4a4848;
}

Мөр хоорондын зай буюу мөрийн өндөр нь HTML хуудасны текстийн мөр хоорондын босоо өндөр юм. Бараг үргэлж энэ зайны утгыг хөтөч эсвэл рендерер харгалзах утгад тохируулдаг. Энэ утга нь ихэвчлэн харуулсан хуудасны фонт болон бусад хүчин зүйлээс хамаардаг.

Хүснэгтийн шинж чанартай нийцүүлэх

Энэ аргад бид элементүүдийг нүднүүдийн байрласан хүснэгт болгон хувиргах оролдлого, үнэн аргыг ашигладаг. Хүснэгт гэж нэрлэгддэг шошгоны хувьд үүнийг энд ашиглахгүй, энд бид огт өөр CSS шинж чанарыг тохируулах болно, энэ нь display: table ;, display: table-cell ;. Хэрэв бид IE-ийн хамгийн эртний хувилбаруудын талаар ярих юм бол өгөгдлийг энд зүгээр л харуулахгүй. Та хөтөчөө шинэчилсэн байх гэж найдаж байна, учир нь энэ нь хуучирсан бөгөөд бараг бүх зүйл зөв харагдахгүй байна.

Черверт-хувилбар (
хил: 2px хатуу # c30b0b;
өндөр: 173px;
дэлгэц: хүснэгт;
өргөн: 100%;
үсгийн хэмжээ: 17px;
үсгийн жин: тод;
өнгө: # 3945a0;
}

Cherevert-variation div (
дэлгэц: хүснэгт-нүд;
босоо зэрэгцүүлэх: дунд;
текстийг зэрэгцүүлэх: төв;
}

Юуны өмнө ихэнх хөтчүүдийн ашигладаг анхдагч тохиргоог авч үзье. Ихэнх орчин үеийн өдрийн хөтөч дээр мөр хоорондын зай.

Flex шинж чанартай нийцүүлэх

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

CSS

Вариант-хэвтээ (
хил: 2px хатуу # d20c0c;
өндөр: 147px;
дэлгэц: уян хатан;
тэгшлэх зүйлс: төв;
зөвтгөх-агуулга: төв;
үсгийн хэмжээ: 18px;
үсгийн жин: тод;
өнгө: # 49518c;
}

Та css-д тоо, пикселийн хэмжээ эсвэл хувиар өөр ямар ч хэмжээг зааж өгдөг шиг мөрийн өндөрт утгыг зааж өгч болно.

Трансформацийн шинж чанартай нийцүүлэх

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

CSS

Босоо-медилпасудса (
хил: 2px хатуу # e00a0a;
өндөр: 158px;
үсгийн хэмжээ: 19px;
үсгийн жин: тод;
өнгө: # 353c71;
}
.vertical-medilpasudsa> div (
албан тушаал: харьцангуй;
дээд: 50%;
хувиргах: translateY (-50%);
текстийг зэрэгцүүлэх: төв;
}

Та утгуудыг тоо болгон өгөхөд энэ нь одоогийн үсгийн хэмжээнээс хамаарч суурь болно. Мөрийн өндөр эсвэл мөр хоорондын зайг тооцоолохын тулд одоогийн үсгийн хэмжээг таны зааж өгсөн тоогоор үржүүлнэ.

Хэрэв та элемент дотор тэмдэгтүүдийг хэвтээ байдлаар голлуулахыг хүсвэл text-align: center-ийг ашиглах ёстой. Нэг сонголт, хэрэв та үүнийг босоо байдлаар голлуулахыг хүсч байгаа бөгөөд танд тогтмол хөл болон нэг мөр текст байгаа бол мөрний өндрийг хөл хэсгийн өндөртэй ижил болгож тохируулна уу.

Хэрэв та div, толгой эсвэл догол мөр зэрэг элемент дотор текстийг голлуулах шаардлагатай бол CSS text-align шинж чанарыг ашиглаж болно.

Text-align нь хэд хэдэн хүчинтэй шинж чанартай:

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

Эдгээр шинж чанаруудыг эцэг эх эсвэл div доторх текстийг зэрэгцүүлэхийн тулд ашиглана уу. Хэрэв та текстийг элемент дотор хэвтээ байдлаар голлуулахыг хүсвэл text-align: center ашиглах ёстой.

Нэг сонголт, хэрэв та үүнийг босоо байдлаар голлуулахыг хүсвэл, хэрэв танд тогтмол хөл болон нэг мөр текст байгаа бол мөрний өндрийг хөл хэсгийн өндөртэй ижил болгож тохируулна уу.

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

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

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

CSS - Блокыг төвд зэрэгцүүлэх

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

Эцэг эх (байрлал: харьцангуй;) .хүүхэд (байрлал: үнэмлэхүй; зүүн: 50%; дээд: 50%; -webkit-transform: орчуулах (-50%, -50%); -moz-transform: орчуулах (-50%) , -50%); -ms-transform: орчуулах (-50%, -50%); -o-transform: орчуулах (-50%, -50%); хувиргах: орчуулах (-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) нөгөө (байрлаж байгаа)-тай нь уялдуулан голд байрлуулна. Энэ жишээн дээрх эх хайрцаг нь тогтмол өндөртэй бөгөөд үүнийг CSS line-height шинж чанарыг ашиглан тохируулдаг.

Эцэг эх (шугамын өндөр: 500 пиксел;) .хүүхэд (дэлгэц: шугаман блок; босоогоор зэрэгцүүлэх: дунд;)

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

• 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+

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

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

Мэдэгдэж буй хэмжээс бүхий блокуудыг тэгшлэх

CSS ашиглах хамгийн хялбар арга бол мэдэгдэж буй өндөр (босоо зэрэгцүүлэх) эсвэл өргөнтэй (хэвтээ зэрэгцүүлэх) блокуудыг зэрэгцүүлэх явдал юм.

Дүүргэгчтэй зэрэгцүүлэх

Заримдаа та элементийг голлох боломжгүй, гэхдээ "хэрэглээ" дэвсгэр".

Жишээлбэл, хэрэв танд 200x200px хэмжээтэй зураг байгаа бол та үүнийг 240x300 хэмжээтэй блокоор голлуулахыг хүсч байна. Бид гадна талын хайрцгийн өндөр өргөнийг = 200px болгож, дээд доод талд 20px, зүүн талд тус бүр 50 пиксел нэмж болно. зөв.

.example-wrapper1 (арын дэвсгэр: # 535E73; өргөн: 200px; өндөр: 200px; дэвсгэр: 20px 50px;)

Үнэмлэхүй байрлалтай хайрцгийг тэгшлэх

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

* Нэг нюанс байна: Дотор блокийн өргөн (өндөр) + зүүн (баруун, доод, дээд) хэсгийн утга нь эх блокийн хэмжээнээс хэтрэхгүй байх ёстой. Зүүн (баруун, доод, дээд) шинж чанарыг 0 (тэг) болгох нь илүү аюулгүй юм.

.example-wrapper2 (байрлал: харьцангуй; өндөр: 250px; дэвсгэр: url (space.jpg);) .cat-king (өргөн: 200px; өндөр: 200px; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; доод: 0; баруун: 0; захын зай: автомат; дэвсгэр: url (king.png);)

Хэвтээ зэрэгцүүлэх

"текстийг зэрэгцүүлэх: төвд" зэрэгцүүлэх

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

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

.example-текст (текстийг зэрэгцүүлэх: төвд; дэвсгэр: 10px; дэвсгэр: # FF90B8;)

Энэ шинж чанар нь зөвхөн текстэд төдийгүй ямар ч доторлогооны элементүүдэд ("дэлгэц: inline") ажиллах болно гэдгийг тэмдэглэх нь зүйтэй.

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

.example-wrapper3 (текстийг зэрэгцүүлэх: төв; дэвсгэр: # FF90B8;) .inline-текст (дэлгэц: доторлогоотой блок; өргөн: 40%; дэвсгэр: 10px; текстийг тэгшлэх: зүүн; дэвсгэр: # FFE Загрузка;)

Хайрцагуудыг захын зайтай зэрэгцүүлэх

Мэдэгдэж буй өргөнтэй блок элементүүдийг "зүүн захаас: автомат; баруун захаас: автомат" гэж тохируулсан бол хэвтээ байдлаар хялбархан зэрэгцүүлнэ. Товчилсон тэмдэглэгээг ихэвчлэн ашигладаг: " захын зай: 0 автомат"(тэг биш ямар ч утгыг ашиглаж болно). Гэхдээ энэ арга нь босоо байрлалд тохирохгүй.

.lama-wrapper (өндөр: 200px; дэвсгэр: # F1BF88;) .lama1 (өндөр: 200px; өргөн: 200px; дэвсгэр: url (lama.jpg); захын зай: 0 auto;)

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

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

Босоо эгнүүлэхтэй холбоотой олон асуудал байдаг - энэ нь CSS-д тусгаагүй бололтой. Хүссэн үр дүнд хүрэх хэд хэдэн арга байдаг боловч бүгд тийм ч үзэсгэлэнтэй биш юм.

Line-height шинж чанартай нийцүүлэх

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

.example-wrapper4 (мөрийн өндөр: 100px; өнгө: # DC09C0; дэвсгэр: # E5DAE1; өндөр: 100px; текстийг зэрэгцүүлэх: төвд;)

Мөн олон шугамаар блокийн тэгшлэхэд хүрэх боломжтой. Үүнийг хийхийн тулд та нэмэлт боодлын блок ашиглаж, шугамын өндрийг тохируулах хэрэгтэй болно. Дотор блок нь олон шугамтай байж болох ч "дотор" шаардлагатай. Та үүн дээр "vertical-align: middle" хэрэглэх хэрэгтэй.

.example-wrapper5 (мөрний өндөр: 160px; өндөр: 160px; үсгийн хэмжээ: 0; дэвсгэр: # FF9B00;) .example-wrapper5 .text1 (дэлгэц: inline-block; фонтын хэмжээ: 14px; мөрийн өндөр: 1.5; босоо зэрэгцүүлэх: дунд; дэвсгэр: # FFFAF2; өнгө: # FF9B00; текстийг зэрэгцүүлэх: төвд;)

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

Хүснэгтийн босоо байрлал

Өмч " босоо зэрэгцүүлэх"Мөн хүснэгтийн нүднүүдэд нөлөөлдөг. "Дунд" гэсэн утгыг тохируулснаар нүдний доторх контент төвлөрсөн байдаг. Мэдээжийн хэрэг, хүснэгтийн зохион байгуулалт нь өнөө үед хуучинсаг гэж тооцогддог, гэхдээ онцгой тохиолдолд та үүнийг зааж өгснөөр загварчилж болно" дэлгэц: хүснэгт-нүд".

Би энэ сонголтыг ихэвчлэн босоо байрлалд оруулахад ашигладаг. Бэлэн төслөөс авсан зураг төслийн жишээг доор харуулав. Ийм байдлаар босоо тэнхлэгт байрлуулсан зураг сонирхол татаж байна.

.one_product .img_wrapper (дэлгэц: хүснэгт-нүд; өндөр: 169px; босоо зэрэгцүүлэх: дунд; халих: далд; дэвсгэр: #fff; өргөн: 255px;) .one_product img (хамгийн их өндөр: 169px; хамгийн их өргөн: 100 %; мин-өргөн: 140px; дэлгэц: блок; захын зай: 0 автомат;)

Хэрэв элемент "байхгүй" -ээс өөр "хөвөгч" байвал ямар ч тохиолдолд блок байх болно (дэлгэц: блок) - тэгвэл та нэмэлт боодолтой блок ашиглах хэрэгтэй болно гэдгийг санах нь зүйтэй.

Нэмэлт доторлогоотой элементтэй зэрэгцүүлж байна

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

Та эх блокийн өндөртэй тэнцүү өндөртэй туслах блок үүсгэх хэрэгтэй бөгөөд дараа нь хүссэн блокыг төвд байрлуулна. Үүний тулд псевдо-элементүүдийн өмнө эсвэл дараахыг ашиглах нь тохиромжтой.

.example-wrapper6 (өндөр: 300px; текстийг зэрэгцүүлэх: төвд; дэвсгэр: # 70DAF1;) .pudge (дэлгэц: шугаман блок; босоогоор зэрэгцүүлэх: дунд; дэвсгэр: url (pudge.png); дэвсгэр өнгө: # fff; өргөн: 200 пиксел; өндөр: 200 пиксел;) .riki (дэлгэц: шугаман блок; өндөр: 100%; босоо тэнхлэг: дунд;)

Дэлгэц: уян хатан, тэгшлэх

Хэрэв та Explorer 8-ийн хэрэглэгчдэд тийм ч их санаа зовдоггүй бол эсвэл тэдний төлөө нэмэлт JavaScript оруулахад бэлэн байгаа бол "display: flex"-г ашиглаж болно. Flex хайрцагнууд нь тэгшлэх асуудлыг шийдвэрлэхэд маш сайн ажилладаг бөгөөд доторх контентыг голлуулахын тулд "margin: auto" гэж бичнэ үү.

Одоогоор энэ арга надад бараг таарч байгаагүй, гэхдээ үүнд тусгай хязгаарлалт байхгүй.

.example-wrapper7 (дэлгэц: уян хатан; өндөр: 300px; дэвсгэр: # AEB96A;) .example-wrapper7 img (марж: автомат;)

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