Подравняване на центъра DIV

, Дори и с появата на HTML5 и появата на сериозни конкуренти под формата на статия или заглавие, тя продължава да бъде навсякъде в маркировката. Ето защо ви предлагам да се справите с въпроса за форматирането и подравняването на divs в центъра.

Какво е div?

Името на елемента идва от английската дума разделение, което означава разделение. При написването на маркировката се използва за разбиване на елементи в блокове. Div затваря групи от съдържание на уеб страница. Например, изображения, параграфи с текст. Маркерът не засяга показването на съдържанието и не носи никакво семантично натоварване.

DIV поддържа всички глобални атрибути. Но за уеб дизайн, имате нужда само от два - това е клас и идентификатор. Всичко останало ще запомните само в екзотични случаи, а това не е факт. Атрибутът за подравняване, който преди е бил използван за центриране на div или левицата, е отхвърлен.

Кога да се използва div

Представете си, че сайтът е хладилник, а DIV са пластмасови контейнери, с които трябва да сортирате съдържанието. Няма да слагате плодове в един контейнер с чернодробна наденица. Всеки вид продукт поставяте отделно. По същия начин се генерира уеб съдържание.

Отворете всеки сайт и го разделете на значими блокове. В горната част на капачката, под долния колонтитул, в центъра на основния текст. Обикновено има по-малка колона отстрани с рекламно съдържание или облак от етикети.

Сега разглобете всеки раздел по-подробно. Започнете с хедър. Заглавната част на сайта има отделно лого, навигация, заглавие от първо ниво, понякога лозунг. Задайте контейнера на всеки семантичен блок. Така не само отделяте елементите в потока, но и ги правите по-лесни за форматиране. Ще ви бъде много по-лесно да подравните обекта в DIV етикета в центъра, като му присвоите клас или идентификатор.

Подравняване на DIV центъра с полета

При обработката на уеб елементи браузърът взема под внимание три свойства: padding, marging и border. Подплатирането е пространството между съдържанието и неговата граница. Марж - полета, разделящи един обект от друг. Границата е линия по блоковете. Те могат да се задават веднага от всички или от едната страна:

 div{border: 1px solid #333;border-left: none;} 

Тези свойства добавят свободно пространство между обектите, а също така им помагат да се подравнят и поставят, когато е необходимо. Например, ако блок с картина трябва да бъде преместен от левия до центъра с 20%, присвоявате маркер-левия елемент със стойност от 20%:

 .block-with-img{margin-left: 20%;} 

Елементите могат също да бъдат форматирани, като се използват техните ширини и отрицателни отстъпи. Например, има блок с размери 200px от 200px. Първо, ние му присвояваме абсолютно позициониране и го преместваме в центъра с 50%.

 div{position: absolute;left: 50%;} 

Сега, така че DIV е идеално разположен в центъра, ние му даваме отрицателен отстъп вляво, равен на 50% от неговата ширина, т.е. -100 пиксела:

 margin-left: -100px; 

В CSS, този метод се нарича "премахване на въздуха". Но той има значителен недостатък в необходимостта от извършване на постоянни изчисления, което е доста трудно да се направи за елементи с няколко нива на гнездене. Ако са зададени padding и border-width, браузърът по подразбиране ще изчисли размера на контейнера като сума от дебелината на границата, подложката отдясно, наляво и самото съдържание вътре, което също може да бъде изненада.

Така че, когато трябва да центрирате DIV, използвайте свойствата за оразмеряване на кутията със стойността на граничната кутия. Той няма да позволи на браузъра да добавя отстъпи и граници към общата ширина на DIV елемента. За да повишите или понижите даден елемент, прилагайте и отрицателни стойности. Но в този случай можете да ги присвоите към горното или долното поле на контейнера.

Как да подравните DIV блока в центъра, използвайки автоматични полета

Това е лесен начин да центрирате големи блокове. Можете просто да зададете ширината на контейнера и маржовото свойство на auto. Браузърът ще постави блока в средата с едни и същи полета отляво и отдясно, правейки цялата работа сами. В резултат на това не рискувате да се заплете в математически изчисления и значително да спестите време.

 div{width: 90%;margin: 0 auto;} 

Използвайте метода за автоматично поле, когато разработвате отзивчиви приложения. Основното е да присвоите на контейнера стойност на ширината в em или процента. Кодът от примера по-горе ще центрира DIV в центъра и на всяко устройство, включително мобилните телефони, ще заема 90% от екрана.

Подравняване чрез дисплея: свойство inline-block

По подразбиране DIV елементите се считат за блок и тяхната дисплейна стойност е блокова. За този метод ще трябва да замените това свойство. Подходящ е само за div с родителски контейнер:

  Всеки текст 

Елемент с класа external-div се присвоява свойство text-align с централната стойност, което поставя текста вътре в центъра. Но засега браузърът вижда вградения DIV като блоков обект. За да работи свойството text-align, вътрешният div трябва да се възприема като малък. Затова в таблицата за CSS за вътрешния-div селектор, пишете следния код:

.inner-div{display: inline-block;} 

Сменяте свойството на показване от блок на вграден блок.

Метод за преобразуване / преобразуване

Cascading style sheets осигуряват възможността за преместване, косене, завъртане и трансформиране на уеб елементи по всякакъв начин. За да направите това, използвайте свойството transform. Стойностите показват желания тип преобразуване и степен. В този пример ще работим с превод:

 transform: translate(50%, 50%); 

Функцията за превод премества елемент от текущата си позиция наляво / надясно и нагоре / надолу. В скоби са дадени две стойности:

• степента на хоризонтално движение;
• степента на движение вертикално.

Ако даден елемент трябва да бъде преместен само по една от координатните оси, след думата трябва да се преведе името на оста и в скобите стойността на изискваното отместване:

 transform: translateY(-20%); 

В някои уроци можете да намерите преобразуване с префикси на доставчика:

 -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); 

През 2018 г. това вече не е необходимо, имотът се поддържа от всички браузъри, включително Edge и IE.

За да изместим DIV, който ни е необходим в центъра, функцията CSS translate се записва със стойност 50% за вертикалната и хоризонталната ос. Поради това браузърът ще измести елемента от текущата си позиция наполовина по ширината и височината. Свойствата за ширина и височина трябва да бъдат посочени:

  Ето някои текстове 

Имайте предвид, че елементът, към който се прилага собствеността на преобразуването, се движи независимо от обектите около него. От една страна, той е удобен, но понякога се движи, DIV може да блокира друг контейнер. Следователно, този метод за центриране на уеб компоненти се счита за нестандартно и се използва само при спешни случаи. За анимация се използват трансформации над всички канони на CSS.

Работа с Flexbox-оформление

Flexbox се счита за труден начин за излагане на уеб оформления. Но ако го овладеете, ще разберете, че той е много по-прост и по-приятен от стандартните методи за форматиране. Спецификацията Flexbox е гъвкав и невероятно мощен начин за работа с предмети. От английски, името на модула се превежда като „гъвкав контейнер“. Стойностите на ширината, височината, местоположението на елементите се регулират автоматично, без да се изчисляват отстъпи и граници.

В предишните примери вече сме работили с дисплейното свойство, но го попитахме за блок (блок) и за низ (inline-block) стойност. За да създадем гъвкави оформления, ще използваме дисплей: flex. Първо се нуждаем от гъвкав контейнер:

За да го конвертирате в гъвкав контейнер в каскадни таблици, пишем:

 .flex-container{display: flex;} 

Всички обекти, затворени в нея, но само преки потомци, ще бъдат флекс-елементи:

  Първата 
  Втората 
  трета 
  Четвъртият 

Ако поставите списък във флекс контейнера, тогава елементите на ли списъка не се считат за флекс елементи. Flexbox оформлението ще действа само на ul:

Правила за поставяне на Flex

За да управлявате елементите с гъвкави елементи, се нуждаете от съдържание за подравняване и подравняване. В зависимост от зададените стойности, тези две свойства поставят обектите според необходимостта автоматично. Ако трябва да подравним всички вложени DIV в центъра, ще напишем justify-content: center, align-items: center и нищо друго. Браузърът ще извърши останалата част от самата работа:

  Първата 
  Втората 
  трета 
  Четвъртият 

За да подравните текста в центъра на DIV, които са флекс елементи, можете да използвате стандартната техника за подравняване на текст. Или можете да направите всяко вложено div също flex-контейнери и да управлявате съдържанието с justify-content. Този метод е много по-рационален, ако вътре съдържа голямо разнообразие от съдържание, включително графики, други вложени обекти, включително многостепенни списъци.