Контент div нь төвлөрсөн байна. CSS-ийн төвд зэрэгцүүлэх. Мөр эсвэл мөр-* элементийг төвд зэрэгцүүлэх

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

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

Доор би зураг, догол мөрийг төвд байрлуулах жишээг өгөх болно.

Энэ контент нь төвлөрсөн байх болно.

Зургийн хувьд бидний шинжилж буй шинж чанар нь арай өөр утгатай болохыг анхаарна уу.

Миний ашигласан жишээн дээр тэгшлэх =дунд". Үүний ачаар өгүүлбэр нь зургийн дунд тодорхой байрласан байхаар дүрсийг зэрэгцүүлсэн.

Css дээр төвлөрөх хэрэгслүүд

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

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

Энэ нь align in -тэй ижил аргаар ажилладаг. Түлхүүр үгсийн дотроос та ерөнхий жагсаалтаас нэгийг нь сонгох эсвэл өвөг дээдсийн шинж чанарыг өвлөн авч болно ( өвлөн авах).

Css3 дээр та өөр 2 параметрийг тохируулах боломжтой гэдгийг тэмдэглэхийг хүсч байна: эхлэх- текст бичих дүрмээс хамааран (баруунаас зүүн тийш эсвэл эсрэгээр), зүүн эсвэл баруун тийш зэрэгцүүлэх (зүүн эсвэл баруун ажилтай төстэй) ба Төгсгөл– эхлэлийн эсрэг тал (текстийг зүүнээс баруун тийш бичихэд баруун, баруунаас зүүн тийш бичихэд – зүүн талд үйлчилнэ).

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

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

Догол

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

Түүний тусламжтайгаар та улаан шугам, цухуйсан хэсгийг хоёуланг нь хийж болно (та сөрөг утгыг зааж өгөх хэрэгтэй).

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

Тийм ээ, CSS-д босоо байрлалд тохируулах тусгай олон утга бүхий босоо тэнхлэгийн шинж чанар байдаг. Гэсэн хэдий ч бодит байдал дээр энэ нь санаснаар огт ажиллахгүй байна. Үүнийг ойлгохыг хичээцгээе.

Дараах аргуудыг харьцуулж үзье. Дараахыг ашиглан тэгшлэх:

• ширээ,
• догол,
• шугамын өндөр
• сунах,
• сөрөг маржин,
• хувиргах
• псевдо элемент
• flexbox.

Хоёр div элемент байдаг бөгөөд тэдгээрийн нэг нь нөгөөгийн дотор байрладаг. Тэдэнд харгалзах ангиудыг нь өгье - гадна болон дотоод.

Нэгдүгээрт, гадаад болон дотоод блокуудын хэмжээсийг авч үзье мэдэгдэж байна. Дүрмийн дэлгэцийг дотоод элементэд inline-block, мөн text-align: center болон vertical-align: дунд хэсгийг гадна элемент рүү оруулъя.

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

Блокуудын хэмжээ, дэвсгэр өнгө зэргийг тохируулж, тэдгээрийн хил хязгаарыг харцгаая.

Гаднах (өргөн: 200px; өндөр: 200px; текстийг зэрэгцүүлэх: төвд; босоогоор зэрэгцүүлэх: дунд; дэвсгэр өнгө: #ffc; ) .дотоод (дэлгэц: inline-block; өргөн: 100px; өндөр: 100px; дэвсгэр өнгө : #fcc;)
Загваруудыг хэрэглэсний дараа бид дотоод блок нь хэвтээ байрлалтай, гэхдээ босоо байдлаар биш байгааг харах болно.
http://jsfiddle.net/c1bgfffq/

Яагаад ийм болсон бэ?Гол нь босоо тэнхлэгийн шинж чанар нь тэгшитгэлд нөлөөлдөг агуулга нь биш харин элемент өөрөө(хүснэгтний нүдэнд хэрэглэхээс бусад тохиолдолд). Тиймээс энэ шинж чанарыг гаднах элементэд хэрэглэх нь юу ч үүсгэсэнгүй. Түүнчлэн, энэ шинж чанарыг дотоод элементэд ашиглах нь юу ч хийхгүй, учир нь inline-блокууд нь зэргэлдээх блокуудтай харьцуулахад босоо байрлалтай байдаг бөгөөд манай тохиолдолд нэг шугаман блок байдаг.

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

Хүснэгт ашиглан тэгшлэх

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

Эхний хасахыг хүснэгт болон td хаягуудыг div-ээр сольж, CSS дээр хүснэгтийг харуулах горимыг тохируулснаар хэсэгчлэн арилгаж болно.

Догол ашиглан зэрэгцүүлэх

Гаднах (өндөр: 200px; ) .дотоод (өндөр: 100px; захын зай: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

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

Шугамын өндрийг ашиглан зэрэгцүүлнэ

Гаднах (өндөр: 200px; шугамын өндөр: 200px; ) .дотоод (цагаан зай: nowrap; халих: далд; )
http://jsfiddle.net/c1bgfffq/12/

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

Гаднах ( өндөр: 200 пиксел; шугамын өндөр: 200 пиксел; ) .дотоод ( шугамын өндөр: хэвийн; дэлгэц: шугаман блок; босоогоор зэрэгцүүлэх: дунд; )
http://jsfiddle.net/c1bgfffq/15/

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

"сунгах" ашиглан зэрэгцүүлэх

Үүнийг хийхийн тулд танд хэрэгтэй:

1. гадаад блоктой харьцангуй байрлал, дотоод блоктой үнэмлэхүй байрлал тогтоох;
2. дүрэм дээд хэсэгт нэмнэ: 0 ба доод: 0 дотоод блок, үүний үр дүнд энэ нь гадна блок бүхэлд нь өндөрт сунах болно;
3. дотоод блокийн босоо дэвсгэрийг автоматаар тохируулна.

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

Сөрөг захын дээд талд зэрэгцүүлэх

Та гадаад блокыг харьцангуй байрлалд, дотоод блокыг үнэмлэхүй байрлалд тохируулах хэрэгтэй. Дараа нь та дотоод блокыг гадна талын блокийн өндрийн хагасаар доошлуулах хэрэгтэй: 50%, өөрийн өндрийн хагасаар дээш өргөх хэрэгтэй margin-top: -H inner / 2.

Гаднах (байрлал: харьцангуй; ) .дотоод (өндөр: 100px; байрлал: үнэмлэхүй; дээд: 50%; захын дээд: -50px; )
http://jsfiddle.net/c1bgfffq/13/

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

Өөрчлөлттэй нийцүүлэх

Гадаад ( байрлал: харьцангуй; ) .дотоод ( байрлал: үнэмлэхүй; дээд: 50%; хувиргах: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Өмнөх аргад яагаад утгыг хувиар тогтоох боломжгүй байсан бэ? Хувийн ахиу утгыг эх элементтэй харьцуулан тооцдог тул 50% нь гадна талын хайрцгийн өндрийн тал хувь байх бөгөөд бид дотоод хайрцгийг өөрийн өндрийн хагас хүртэл өсгөх шаардлагатай болно. Трансформацийн өмч нь үүнд тохиромжтой.

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

Flexbox-той нийцүүлэх

Гаднах блокыг харуулахын тулд тохируулах шаардлагатай: flex болон дотоод блок нь margin: auto . Тэгээд бүгд байна! Үзэсгэлэнтэй, тийм үү?

Гаднах (дэлгэц: уян хатан; өргөн: 200 пиксел; өндөр: 200 пиксел; ) .дотоод ( өргөн: 100 пиксел; зах: автомат; )
http://jsfiddle.net/c1bgfffq/14/

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

Би аль аргыг сонгох ёстой вэ?

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

Бид блокийн элементүүдийн тохируулгад дүн шинжилгээ хийдэг CCS. Бид хэд хэдэн хэсгийг төвд байрлуулна DIVэсвэл Л.Иэлементүүд. Би ихэнх тохиолдолд хэд хэдэн сонголтыг санал болгож байна.

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

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

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

Сонголт 1

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

Төвлүүлье UL агуулга 4 элементтэй Л.Иблокт байгаа DIVангитай сав.

Энэ тохиолдолд CSS-д дараах дүрмүүд хангалттай.

Контейнер (
өргөн: 100%;
}

Контейнер ul (
текстийг зэрэгцүүлэх: төв;
жагсаалтын хэв маяг: байхгүй;
}

Контейнер li (
дэлгэц: inline-block;
}

Бид дараах дүр төрхийг олж авна: Энд төвлөрсөн 4 LI элемент байна. Дэлгэцийн хэмжээг багасгахад тохирохгүй элементүүдийг доош нь шилжүүлдэг.

Хэрэв блок бол Л.ИЭдгээр шинж чанаруудыг төвд суулгаагүй бөгөөд энэ нь бусад өмч хөрөнгөд саад учруулж байна гэсэн үг юм. Жишээлбэл, энэ нь өмч байж болно хөвөх: зүүнэсвэл дэлгэц: хүснэгт;эсвэл өөр.

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

Контейнер li (
дэлгэц: inline-block;
захын зай: 5px;
өргөн: 100px;
}

Бид дараахь зүйлийг авна.

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

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

Дараа нь бид устгах болно маржинмөн үүний өргөнийг нэмнэ үү өргөнингэснээр тэр талбайг бүрэн хамарна.

Контейнер li (
босоо зэрэгцүүлэх: дээд;
дэлгэц: inline-block;
өргөн: 32.899%;
}

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

Блокуудад би зориудаар тохируулгад шууд нөлөөлдөг хэв маягийг үлдээхийн тулд нэмэлт зүйл нэмдэггүй. Гэхдээ хэрэв та үүнийг хийвэл ийм блок авахгүй. Хэрэв та нэгдүгээрт, блокон дээр өнгө нэмэх хэрэгтэй бол хоёрдугаарт, хоосон байвал тавь. өндөр: 100px;. Бусад шинж чанарууд нь танд таалагдах болно.

Эцсийн сонголт нь:

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

Сонголт 2

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

Дараагийн мөрөнд байгаа блокыг зүүн зэрэгцүүлэхийн тулд бүх div-г хэрхэн голлуулах вэ?

Бид дараах бүтэцтэй.

Бид тэдэнд зориулж хичээл бичдэг:

өргөн: 90%;
захын зай: 0 автомат;
}

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

Өргөн: calc(33.3333% - (0.666666666667 * 36px));
захын зай: 0 10px 0 11px;
}

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

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

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

Хэрэв бид гар утасны хувилбарыг 3 блок биш, харин 2 блоктой байхыг хүсч байвал 768 пикселийн нягтралтай ccs-д бид блокуудыг өөрөөр хуваана.

@media дэлгэц ба (хамгийн их өргөн: 768px) (
.архив нийтлэл (
өргөн: calc(47.3333% - (0.666666666667 * 25px));
захын зай: 0 10px 0 20px;
}
}

Гар утасны хувилбарт ижил блокуудыг авцгаая, гэхдээ нэг мөрөнд хоёр блоктой:

Сонголт 3

Одоо бид ашиглан уялдуулах болно уян хатан. Энэ нь тэгшлэх хамгийн тохиромжтой арга мэт санагдаж магадгүй, учир нь энэ нь маш энгийнээр ажилладаг. Гэсэн хэдий ч FLEX 2-р хувилбарт тайлбарласан даалгаврыг даван туулж чадахгүй байна. Наад зах нь би ижил үр дүнд хүрч чадаагүй.

Дараагийн хэсэг рүү:

Загвар нэмэх:

#cssmenu (
захын зай: 20px автомат;
}

#cssmenu ul (
жагсаалтын хэв маяг: байхгүй;
дэлгэц: уян хатан;
уян хатан боолт: боох;
зөвтгөх-агуулга: төв;
}

#cssmenu > ul > li (
захын зай: 1px;
}

Бид авах:

Өгөгдсөн жишээнд:

уян хатан боолт: боох;

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

зөвтгөх-агуулга: төв;

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

Сонголт 4

Флекс технологийг ашиглан тохируулах өөр нэг сонголт.

Бид дотроо хоёр блоктой савтай. Өргөнийг хоёр тэнцүү тал болгон хуваахын тулд бидэнд эдгээр 2 блок хэрэгтэй.

Үүнийг хийхийн тулд бид дараах шинж чанаруудыг хэв маягт бичнэ.

Контейнер (
дэлгэц: уян хатан;
}

Блок (
уян хатан суурь: 100%;
}

Сонголт 5

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

Тиймээс, бидэнд дараах төрлийн 9 блок байна (би мөрүүдийг 9 удаа давтаагүй, гэхдээ 9 блок байгаа гэдгийг санаарай):

Тэдэнд зориулж загвар хэрэглээрэй:

Нийтлэлд зориулсан архивын контейнер (
өргөн: 100%;
текстийг зэрэгцүүлэх: төв;
}

Архив нийтлэл (
өргөн: 25%;
босоо зэрэгцүүлэх: дээд;
дэлгэц: inline-block;
текстийг зэрэгцүүлэх: зүүн;
}

Архив нийтлэл:nth-child(1),
.архив нийтлэл:nth-child(4),
.архив нийтлэл:nth-child(7) (
захын зай: 20px 0 30px 40px;
}

Архив нийтлэл:nth-child(2),
.архив нийтлэл:nth-child(5),
.архив нийтлэл:nth-child(8) (
захын зай: 20px 40px 30px;
}

Архив нийтлэл:nth-child(3),
.архив нийтлэл:nth-child(6),
.архив нийтлэл:nth-child(9) (
захын зай: 20px 40px 30px 0;
}

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

Энэ төрлийн төвлөрлийн давуу тал нь та блокуудын хооронд тодорхой, тодорхой догол хийх боломжтой юм.

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

аль аль нь дивэсвэл хэсвэл өөр зүйл бол дотоод элемент гэж үзэх болно n-р хүүхэд. Үүний үр дүнд CSS-ийн хэв маяг үүн дээр давхарлаж, захын зайг ашиглан хийсэн бүх догол нь блокуудыг анх төлөвлөснөөс өөрөөр шилжүүлэх болно.