Поравнање ДИВ центра

. Чак и са појавом ХТМЛ5 и појавом озбиљних конкурената у облику чланка или заглавља, он се и даље свуда убацује у маркуп. Стога вам предлажем да се бавите питањем форматирања и усклађивања дивова у центру.

Шта је див?

Име елемента потиче од енглеске поделе речи, што значи подела. Приликом писања ознаке, она се користи за разбијање елемената у блокове. ДИВ обједињује групе садржаја на веб страници. На пример, слике, пасуси са текстом. Ознака не утиче на приказ садржаја и не носи никакво семантичко оптерећење.

ДИВ подржава све глобалне атрибуте. Али за веб дизајн, потребна су вам само два - то је класа и ид. Све остало ћете запамтити само у егзотичним случајевима, а то није чињеница. Атрибут поравнања, који је претходно коришћен за поравнање ДИВ-а у центру или на левој страни, сматра се застарелим.

Када користити див

Замислите да је локација хладњак, а ДИВ су пластични контејнери, по којима је потребно сортирати садржај. Нећете ставити воће у једну посуду са кобасицом. Сваки тип производа ставите одвојено. Слично томе, генерише се веб садржај.

Отворите било коју локацију и подијелите је на значајне блокове. На врху поклопца, испод подножја, у центру главног текста. Обично постоји мања колона на страни са рекламним садржајем или облаком ознака.

Сада детаљније раставите сваки одељак. Почните са заглављем. Заглавље сајта има посебан лого, навигацију, наслов првог нивоа, понекад слоган. Доделите свој контејнер сваком семантичком блоку. Дакле, не само да раздвајате елементе у стреаму, већ и олакшавате њихово форматирање. Биће вам много лакше да поравнате објекат у ДИВ тагу у центру тако што ћете му доделити класу или идентификатор.

ДИВ центрирање помоћу маргина

Приликом обраде веб елемената, претраживач узима у обзир три својства: паддинг, маргинг и бордер. Паддинг паддинг је простор између садржаја и његове границе. Маргина - поља која раздвајају један објекат од другог. Граница је линија дуж блокова. Могу бити додељени одмах са свих страна или само са једне стране:

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

Ова својства додају слободан простор између објеката, а такође им помажу да се поравнају и поставе по потреби. На пример, ако блок са сликом треба да се помери са леве ивице ка центру за 20%, додељујете елемент маргин-лефт вредност од 20%:

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

Елементи се такође могу форматирати користећи њихове ширине и негативне увлаке. На пример, ту је блок димензија 200пк од 200пк. Прво, додељујемо му апсолутно позиционирање и пребацујемо га у центар за 50%.

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

Сада, тако да је ДИВ идеално лоциран у центру, дајемо му негативну алинеју са леве стране, једнаку 50% њене ширине, односно -100 пиксела:

 margin-left: -100px; 

У ЦСС-у, овај метод се зове "уклањање ваздуха". Али има значајан недостатак у потреби за константним израчунима, што је прилично тешко направити за елементе са неколико нивоа гнијежђења. Ако су подешене паддинг и бордер-видтх, подразумевани претраживач ће израчунати величину контејнера као суму дебљине границе, паддинг десно, лево и сам садржај изнутра, што такође може бити изненађење.

Дакле, када требате центрирати ДИВ, користите својство за одређивање величине кутије са вриједношћу граничног оквира. Он неће дозволити претраживачу да додаје увлаке и границе укупној ширини ДИВ елемента. Да бисте подигли или спустили елемент, примените и негативне вредности. Али у овом случају можете да их доделите или горњем или доњем пољу контејнера.

Како поравнати ДИВ блок у центру користећи аутоматска поља

Ово је једноставан начин за центрирање великих блокова. Једноставно доделите ширину контејнера и особину маргине на ауто. Претраживач ће поставити блок у средини са истим пољима са леве и десне стране, радећи сав посао. Као резултат тога, не ризикујете да будете уплетени у математичке прорачуне и значајно уштедите ваше време.

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

Користите методу аутоматског поља када развијате апликације које одговарају потребама. Главна ствар је да се контејнеру додели вредност ширине у ем или проценат. Шифра из горе наведеног примјера ће центрирати ДИВ у центру и на било којем уређају, укључујући и мобилне телефоне, заузимаће 90% екрана.

Поравнање кроз приказ: инлине-блоцк проперти

По подразумеваној вредности, ДИВ елементи се сматрају блоком, а њихова приказна вредност је блокирана. За овај метод ћете морати да поништите ову особину. Погодан само за див са родитељским контејнером:

  Било који текст 

Елементу спољне див класе додељује се својство поравнања текста са средњом вредношћу, која текст ставља у центар. Али за сада, прегледач види уграђени ДИВ као блок објекат. Да би својство поравнања текста радило, унутрашњи-див мора бити перципиран као мала слова. Стога, у ЦСС табели за селектор унутрашњег див-а, пишете следећи код:

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

Промените својство приказа из блока у инлине-блок.

Трансформ / транслате метода

Каскадни листови стилова пружају могућност кретања, кошења, ротирања и трансформисања веб елемената на сваки начин. Да бисте то урадили, користите својство трансформације. Вредности указују на жељени тип конверзије и степен. У овом примеру ћемо радити са преводом:

 transform: translate(50%, 50%); 

Функција транслате помера елемент из његове тренутне позиције лево / десно и горе / доле. Две вредности су дате у заградама:

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

Ако елемент треба да се помера само дуж једне од координатних осе, онда наведете после речи име осовине, ау загради вредност траженог помака:

 transform: translateY(-20%); 

У неким упутствима можете пронаћи трансформацију са префиксима добављача:

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

У 2018, ово више није потребно, својство је подржано од стране свих претраживача, укључујући Едге и ИЕ.

Да би се ДИВ померио у центар, ЦСС транслате функција је написана са вредношћу од 50% за вертикалну и хоризонталну осу. Због тога ће претраживач померити елемент са тренутне позиције за половину ширине и висине. Карактеристике ширине и висине морају бити наведене:

  Ево текста 

Имајте на уму да се елемент на који се примењује својство трансформације креће без обзира на објекте око њега. С једне стране, то је згодно, али понекад се креће, ДИВ може блокирати други контејнер. Стога се овај метод центрирања веб компоненти сматра нестандардним и користи се само у хитним случајевима. За анимацију се користе трансформације над свим канонима ЦСС-а.

Радите са Флекбок-распоредом

Флекбок се сматра тешким начином постављања веб страница. Али ако је савладате, схватит ћете да је много једноставнији и угоднији од стандардних метода форматирања. Флекбок спецификација је флексибилан и невероватно моћан начин за руковање предметима. Из енглеског, назив модула се преводи као „флексибилни контејнер“. Вредности ширине, висине, локације елемената се подешавају аутоматски, без рачунања удубљења и маргина.

У претходним примерима већ смо радили са својством приказа, али смо је питали блок (блок) и вредност стринга (инлине-блоцк). Да би направили флексибилне распореде, користићемо дисплаи: флек. Прво нам је потребан флек контејнер:

Да бисмо га претворили у флек контејнер у каскадним табелама, пишемо:

 .flex-container{display: flex;} 

Сви објекти у њему, али само директни потомци, биће флек-елементи:

  Први 
  Други 
  Треће 
  Четврти 

Ако ставите листу унутар флек контејнера, онда се листе ли листе не сматрају флекс елементима. Флекбок лаиоут ће деловати само на ул:

Флек правила постављања

Да бисте управљали флекс елементима, потребан вам је садржај за поравнавање и поравнавање. У зависности од наведених вредности, ова два својства аутоматски постављају објекте по потреби. Ако морамо да поравнамо све угњеждене ДИВ-ове у центру, пишемо јустифи-цонтент: центер, алигн-итемс: центер и ништа друго. Прегледач ће обавити остатак посла:

  Први 
  Други 
  Треће 
  Четврти 

Да бисте поравнали текст у центру ДИВ-а, који су елементи флекса, можете користити стандардну технику поравнавања текста. Или можете да направите сваки угњеждени див такое флек-контејнере и управљате садржајем са јустифи-цонтент. Овај метод је много рационалнији ако унутрашњост садржи различите садржаје, укључујући графику, друге угнеждене објекте, укључујући и листе на више нивоа.