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

Какво е DIV

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

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

Кога да използвате DIVs

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

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

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

Центриране на DIV с използване на полета

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

div( border: 1px solid #333; border-left: none; )

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

Block-with-img( margin-left: 20%; )

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

Div (позиция: абсолютна; ляво: 50%; )

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

Ляво поле: -100px;

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

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

Как да центрирате DIV блок с помощта на автоматични полета

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

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

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

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

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

Inner-div( display: inline-block; )

Променяте свойството за показване от block на inline-block.

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

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

трансформиране: превод (50%, 50%);

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

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

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

Трансформация: translateY(-20%);

В някои ръководства можете да намерите transform с префикси на доставчика:

Преобразуване на Webkit: превод (50%, 50%); -ms-трансформация: превод (50%, 50%); трансформиране: превод (50%, 50%);

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

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

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

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

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

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

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

Гъвкав контейнер (дисплей: гъвкав; )

Всички вложени обекти, но само преки наследници, ще бъдат гъвкави елементи:

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

Правила за поставяне на гъвкави елементи

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

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

Добър ден, абонати и читатели на тази публикация. Днес искам да навляза в подробности и да ви кажа как да центрирате текст в CSS. В някои предишни статии косвено засегнах тази тема, така че имате известни познания в тази област.

Въпреки това, в тази публикация ще ви разкажа за всички различни начини за подравняване на обекти, а също така ще обясня как да правите отстъпи и червени линии на абзаци. И така, нека започнем да учим материала!

HTML и неговите потомци и подравнете

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

Що се отнася до валидирането (този термин е описан подробно в статията ""), самата html спецификация осъжда използването < център>, тъй като за валидност е необходимо да се използва преход DOCTYPE>.

Този типпозволява преминаването на забранени елементи.

Сега да преминем към атрибута подравнете. Той задава хоризонталното подравняване на обектите и се вписва след декларацията на етикета. Обикновено може да се използва за подравняване на съдържание отляво ( наляво), по десния край ( точно), центрирано ( център) и по ширина на текста ( оправдавам).

По-долу ще дам пример, в който ще поставя картината и абзаца в центъра.

Това съдържание ще бъде центрирано.

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

В примера, който използвах подравняване="средата". Благодарение на това изображението беше подравнено така, че изречението да е разположено ясно в средата на картината.

Инструменти за центриране в css

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

Така че нека започнем с първото свойство на центрирането на текста - това е текст-подравнете.

Функционира по същия начин като align in . Сред ключовите думи можете да изберете една от общия списък или да наследите характеристиките на предшественик ( наследяват).

Бих искал да отбележа, че в css3 можете да зададете още 2 параметъра: започнете– в зависимост от правилата за писане на текст (отдясно наляво или обратно), задава подравняването наляво или надясно (подобно на работата наляво или надясно) и край– обратното на начало (при писане на текст отляво надясно действа като дясно, при писане отдясно наляво – ляво).

Изречение вдясно

Изречение с край

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

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

Ключова дума	Цел
базова линия	Указва подравняване към предшестваща линия, наречена базова линия. Ако обектът-предшественик няма такава линия, тогава подравняването се извършва по долната граница.
средата	Средата на мутиралия обект е подравнена спрямо основната линия, към която се добавя етажът на височината на родителския елемент.
отдолу	Долната част на избраното съдържание се настройва спрямо долната част на обекта под него.
отгоре	Подобно на дъното, но с горната част на обекта.
супер	Прави знака горен индекс.
суб	Прави елемента долен индекс.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

В INд ТЗАДО

В INд ТЗАДО

Вдлъбнатини

И накрая стигаме до отстъпите на параграфите. Езикът CSS използва специално свойство, наречено текст-отстъп.

С негова помощ можете да направите както червена линия, така и издатина (трябва да посочите отрицателна стойност).

За да създадете червена линия, трябва да знаете само един параметър.

Това е простото свойство за отстъп на текст.

Задача за оформление, която е много често срещана, е вертикалното подравняване на текст в блок div.

Ако обикновено няма проблеми с хоризонталното подравняване на текста (използваме свойството text-align:center и всичко ще бъде наред), тогава с вертикалното подравняване всичко е малко по-сложно.

Има едно свойство в CSS, наречено vertical-align. Изглежда, че с него можете да разрешите всички проблеми. Но това не беше така.

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

За блокови елементисвойството vertical-align не работи.

Има два начина за излизане от тази ситуация:

За тези, които предпочитат да гледат всичко във видео:

За тези, които обичат текста, прочетете по-долу за решение на този проблем.

Метод А.Едно решение е да поставите текста не в елемент div, а в клетка на таблица.

Ред 1 Ред 2 Ред 3

Метод Б.Използвайте свойството display:table-cell;

Ред 1

Ред 2

Ред 3

Един проблем, тази собственост не се поддържа Internet Explorer 6-7 версии.

Ситуация 1.Подравнете един ред текст.

Нека да разгледаме един прост пример.

Ред текст е позициониран по горния ръб. защото Имаме само един ред текст, така че за подравняване можем да използваме най-много по прост начин: Това е добавяне на свойство за височина на линия със стойност, равна на височината на елемента div, в който се намира текстът.

Линията, която трябва да бъде вертикално подравнена

Този метод работи добре, когато имате само един ред текст.

Ситуация 2.Ако знаете точната ширина и височина на дъщерния блок, където се намира самият текст.

Това решение включва използване на свойството position:absolute за дъщерния блок, позиционирането му абсолютно спрямо родителския блок с position:relative.

Ред 1

Ред 2

Ред 3

Като знаете ширината и височината на блока, можете да вземете половината от тази стойност и да я зададете с отрицателни стойности за свойствата margin-left и margin-top.

Ако не се нуждаете от поддръжка за по-стари браузъри, тази опция ще бъде най-оптималната.

Както можете да видите, толкова проста задача като центриране на текст се оказа не толкова проста на практика.

Хоризонталното подравняване на съдържанието, което има свойството float, може да се направи много лесно и също така е напълно междубраузърно (работи в Opera 8+, Firefox 3+, IE 5.5+).

Пример за подравняване на div блок

За да подравните плаващ блок или няколко блока подред, имате нужда от друг външен блок. На външния блок и вътрешните блокове се присвоява позиция: абсолютна; и float: ляво; , задайте външно ляво: 50%; , а за вътрешни блокове вдясно: 50%; . За да използвате float: right; необходимост от присвояване на външно право на присвояване: 50%; , а за вътрешни блокове вляво: 50%; . Препоръчвам изчистване на плаващи елементи чрез поставяне на блок със свойството clear: both след централно подравнените елементи. .

По този начин можете да постигнете следното центриране:

Има зелена рамка вътрешно тялос id = block-inner, външният блок с id = block има периодична червена рамка.

Блокиране на съдържание

#block (позиция: относителна; float: ляво; ляво: 50%; граница: 1px пунктирана #a00; ) #block-inner (позиция: относителна; float: ляво; дясно: 50%; граница: 2px плътно #0a0; подложка : 10px; #страница (препълване: скрито; )

Пример за подравняване на елементи от менюто

На практика горният пример може да се приложи при хоризонтално подравняване на менюто на сайта. Трябва обаче да имате предвид, че при достатъчно голям брой елементи (заемащи повече от половината страница по ширина) се появява хоризонтално превъртане. За да се отървете от него, трябва да приложите свойството overflow във външния блок. Ако менюто е падащо меню, тогава неговите падащи елементи могат да бъдат отрязани от този външен блок. За да избегнете този проблем, трябва да приложите свойството за преливане към блок, който е възможно най-обграждащ, например най-външния блок, който рамкира цялото съдържание на страницата.

Например можете да подредите менюто по следния начин:

Елементите li от списъка ul имат зелена граница, а списъкът ul има пунктирана червена рамка.

HTML кодът за примера по-долу изглежда така:

• Подравнен елемент 1
• Подравнен елемент 2
• Подравнен елемент 3
• Подравнен елемент 4
• Подравнен елемент 5

CSS кодът за примера по-долу изглежда така:

#menu (позиция: относителна; float: ляво; ляво: 50%; граница: 1px пунктирана #a00; стил на списък: няма; margin: 0; padding: 0; ) #menu li (позиция: относителна; float: ляво; дясно: 50%; граница: плътна #0a0; подложка: #страница (преливане: скрито; )

Така че е доста просто. Желая ви успех в усвояването на нови методи.

Може да се извърши подравняване на елементи хоризонтално и вертикално по различни начини. Изборът на метод зависи от вида на елемента (блоков или инлайн), вида на неговото позициониране, размера и др.

1. Хоризонтално подравняване към центъра на блока/страницата

1.1. Ако ширината на блока е посочена:

div (ширина: 300px; марж: 0 автоматично; /*центрирайте елемента хоризонтално в рамките на родителския блок*/)

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

1.2. Ако блок е вложен в друг блок и ширината му не е посочена/посочена:

.wrapper (подравняване на текст: център;)

1.3. Ако блокът има ширина и трябва да бъде центриран върху родителския си блок:

.wrapper (позиция: относителна; /*задаване на относително позициониране за родителския блок, така че след това да можем абсолютно да позиционираме блока вътре в него*/) .box (ширина: 400px; позиция: абсолютна; ляво: 50%; margin-left: -200px; / *изместете блока наляво с разстояние, равно на половината му ширина*/ )

1.4. Ако блоковете нямат посочена ширина, можете да ги центрирате с помощта на родителски обвиващ блок:

.wrapper (text-align: center; /*поставете съдържанието на блока в центъра*/) .box ( display: inline-block; /*подредете блоковете в ред хоризонтално*/ margin-right: -0.25em ; /*премахване на дясното пространство между блоковете*/ )

2. Вертикално подравняване

2.1. Ако текстът заема един ред, например за бутони и елементи от менюто:

.button (височина: 50px; височина на реда: 50px;)

2.2. За вертикално подравняване на блок в рамките на родителски блок:

.wrapper (позиция: относителна;).box (височина: 100px; позиция: абсолютна; горна: 50%; поле: -50px 0 0 0; )

2.3. Вертикално подравняване по тип таблица:

.wrapper ( дисплей: таблица; ширина: 100%; ) .box ( дисплей: клетка-таблица; височина: 100 пиксела; подравняване на текст: център; вертикално подравняване: среда; )

2.4. Ако даден блок има дадена ширина и височина и трябва да бъде центриран върху своя родителски блок:

.wrapper (позиция: относителна;) .box (височина: 100px; ширина: 100px; позиция: абсолютна; горе: 0; дясно: 0; долу: 0; ляво: 0; поле: автоматично; препълване: автоматично; /*до съдържанието не се разпространи */ )

2.5. Абсолютно позициониране в центъра на страницата/блока с помощта на CSS3 трансформация:

ако за елемента са посочени размери

div ( width: 300px; /*задайте ширината на блока*/ height:100px; /*задайте височината на блока*/ transform: translate(-50%, -50%); position: absolute; top: 50 %; ляво: 50% ;)

ако елементът няма размери и не е празен

Малко текст тук

h1 (поле: 0; трансформация: превод (-50%, -50%); позиция: абсолютна; горе: 50%; ляво: 50%; )