⭐ 0
🔍
Текст Слика ПДФ и документи Аудио Музика Електроника Време Комуналне услуге Валидатори Езотерично Игре

Како центрирати Див у ЦСС-у (Флекбок)

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

Обрада... 0%

Резултат

Ево директног одговора на најчешће постављано питање у ЦСС-у: да бисте центрирали див, ставите дисплаи: флек, јустифи-цонтент: центер и алигн-итемс: центар на његов родитељ. То је то — три декларације на контејнеру, а дете седи савршено центрирано и хоризонтално и вертикално унутар њега, било које величине. Ова страница отвара генератор са тачно том комбинацијом која је већ примењена, тако да преглед испод показује да тренутно ради на три нумерисана поља.

Пре флекбок-а, за центрирање див-а су били потребни хакови: маргина: 0 ауто центриран само хоризонтално и радио је само на блоку фиксне ширине; вертикално центрирање је значило позицију: апсолутно са негативним маргинама или трик за трансформацију, обоје крхко у тренутку када садржај промени величину. јустифи-цонтент управља главном осом, а алигн-итемс управља попречном осом — заједно се центрирају у оба смера без обзира на то колико је дете високо или широко, због чега је овај пар постао стандардни одговор.

Превуците било коју контролу испод и гледајте како три оквира за преглед остају центрирана док контејнер мења облик, или додајте размак између њих. Када изгледа како треба, копирајте ЦСС блок на дну право у вашу листу стилова — ради на исти начин у сваком модерном претраживачу, није потребна библиотека.

🛡️
Извршено у претраживачу

Ваши фајлови и улази никада не напуштају овај уређај. Обрада се одвија потпуно ван мреже. 100% безбедно.

Прихваћени формати и правила

  • Контроле контејнера: флек-дирецтион, јустифи-цонтент, алигн-итемс, флек-врап и унос празнине у пикселима, примењен уживо на преглед.
  • Подразумевано су три дечја кутија означена бојама (додајте до осам, уклоните на два), сваки са сопственим пољима флек-гров, флек-схринк и флек-басис.
  • ЦСС блок који се може копирати са правилом .флек-цонтаинер плус једним правилом .флек-итем-Н по детету које има неподразумевана флек својства.

Кључне предности

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

Случајеви употребе

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