Оферта вдясно

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

° С ATд TОДа се

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

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

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

Какво е DIV

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

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

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

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

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

Сега разглобете всеки раздел по-подробно. Започнете със заглавката. Заглавката на сайта има отделно лого, навигация, заглавие от първо ниво и понякога слоган. Задайте свой собствен контейнер към всеки семантичен блок. Това не само ще раздели елементите в потока, но и ще улесни форматирането им. Ще бъде много по-лесно за вас да центрирате обекта в тага 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 това се нарича "премахване на въздух". Но има значителен недостатък в необходимостта от извършване на постоянни изчисления, което е доста трудно да се направи за елементи с няколко нива на влагане. Ако са зададени padding и border-width, браузърът по подразбиране ще изчисли размерите на контейнера като сбор от дебелината на границата, подложката отдясно, отляво и самото съдържание, което също може да бъде изненада.

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

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

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

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

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

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

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

Inner-div( display: inline-block; )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.1. Ако блокът има ширина:

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

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

1.2. Ако блок е вложен в друг блок и за него няма зададена ширина:

.wrapper(text-align:center;)

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

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

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

.wrapper (text-align: center; /*центрирайте съдържанието на блока*/) отстъп между блоковете*/ )

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

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

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

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

.wrapper (позиция: относителна;) .box (височина: 100px; позиция: абсолютна; горна: 50%; margin: -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%; left: 50% ;)

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

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

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

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

Пример 4.1. Центриране с таг CENTER

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

Формално CENTER трябва да се използва само като параметър към други блокови тагове (P, PRE и други). Въпреки това, в браузъра Netscape Navigator 2.0 CENTER беше въведен като самостоятелен етикет. Това допълнение имаше за цел да премахне допълнителната вертикална подложка, която се появява при използване на блок тагове. Ако вместо тага CENTER текстът е поставен вътре в параграф (

) , между тях има допълнителен вертикален отстъп хоризонтална линияи този текст.

CENTER не е част от HTML спецификацията. В "официален" HTML форматиране, като подравняването на текст трябва да се извършва чрез атрибути на тагове (например,

) или използване на стилове. Въпреки това, този етикет получи правото да съществува. Въпреки това, след пускането на спецификацията HTML 4 W3, Консорциумът препоръча да се избягва използването на тага CENTER и елементът

, както е показано в пример 4.2.

Пример 4.2. Центриране с DIV таг

---

Друг начин за центриране е използването на стилове. Стиловете са инструкции, които ви позволяват да контролирате атрибути за форматиране като шрифт, цвят, подравняване и т.н. Пример за предефиниране на тага P за центриране на текста.

Пример 4.3. Центриране със стилове

Сега, когато ще използвате маркера P с горното
стил, текстът на параграфа ще бъде подравнен към центъра на прозореца на браузъра

Центрирайте елементите вертикално с използвайки CSSе задача, която представлява известна трудност за разработчиците. Има обаче няколко метода за решаването му, които са доста прости. Този урок представя 6 опции за вертикално центриране на съдържание.

Да започнем с общо описаниезадачи.

Проблем с вертикалното центриране

Хоризонталното центриране е много просто и лесно. Когато центрираният елемент е вграден, използвайте свойството за относително подравняване родителски елемент. Когато елементът е блоков елемент, задаваме неговата ширина и автоматична инсталацияляво и дясно поле.

Повечето хора, когато използват свойството text-align:, се позовават на свойството vertical-align за вертикално центриране. Всичко изглежда съвсем логично. Ако сте използвали шаблони за таблици, вероятно сте използвали широко атрибута valign, което затвърждава убеждението, че вертикалното подравняване е правилният начин.

Но атрибутът valign работи само върху клетки на таблица. И свойството vertical-align е много подобно. Също така засяга клетките на таблицата и някои вградени елементи.

Стойността на свойството vertical-align е относителна към родителския вграден елемент.

• В ред от текст подравняването е спрямо височината на реда.
• Клетката на таблицата използва подравняване по отношение на стойността, изчислена по специален алгоритъм (обикновено се получава височината на реда).

Но за съжаление, свойството vertical-align не работи на елементи на ниво блок (като параграфи в елемент div). Тази ситуация може да доведе до идеята, че няма решение на проблема с вертикалното подравняване.

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

метод на височината на линията

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

По подразбиране свободното пространство ще бъде разпределено равномерно над и под текста. И линията ще бъде центрирана вертикално. Често височината на линията се прави равна на височината на елемента.

HTML:

CSS:

#child (line-height: 200px;)

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

Центриране на изображение с височина на линията

Ами ако съдържанието е изображение? Горният метод ще работи ли? Отговорът се крие в друг ред от CSS код.

HTML:

CSS:

#parent (line-height: 200px;) #parent img (vertical-align: middle;)

Стойността на свойството line-height трябва да е по-голяма от височината на изображението.

CSS табличен метод

Както бе споменато по-горе, свойството за вертикално подравняване се прилага към клетките на таблицата, където работи чудесно. Можем да визуализираме нашия елемент като клетка на таблица и да използваме свойството vertical-align върху него, за да центрираме съдържанието вертикално.

Забележка: CSS таблицане е същото като HTML таблица.

HTML:

CSS:

#родител (дисплей: таблица;) #дете ( дисплей: клетка-таблица; вертикално подравняване: средата;)

Задаваме изхода на таблицата на родителския div и изобразяваме вложения div като клетка на таблица. Сега можете да използвате свойството vertical-align на вътрешния контейнер. Всичко в него ще бъде центрирано вертикално.

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

Недостатъкът на този метод е, че не работи в по-стари версии на IE. Трябва да използвате свойството display: inline-block за вложения контейнер.

Абсолютно позициониране и отрицателни маржове

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

Примерният код прави хоризонтално и вертикално центриране едновременно:

HTML:

CSS:

#parent (позиция: относителна;) #child (позиция: абсолютна; горе: 50%; ляво: 50%; височина: 30%; ширина: 50%; поле: -15% 0 0 -25%; )

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

Този метод не работи във всички браузъри.

Абсолютно позициониране и разтягане

Примерният код извършва вертикално и хоризонтално центриране.

HTML:

CSS:

#родител (позиция: относителна;) #дете (позиция: абсолютна; горна: 0; долна: 0; ляво: 0; дясно: 0; ширина: 50%; височина: 30%; поле: автоматично; )

Идеята зад този метод е да разтегнете вложения елемент до всичките 4 граници на родителския елемент, като зададете свойствата отгоре, отдолу, отдясно и отляво на 0.

Задаването на автоматично формиране на полета от всички страни ще доведе до задачата равни стойностиот всичките 4 страни и ще доведе нашия вложен div елемент до центъра на родителския елемент.

За съжаление, този метод не работи в IE7 и по-стари версии.

Еднаква подплата отгоре и отдолу

Този метод изрично задава равни подложки над и под родителския елемент.

HTML:

CSS:

#parent (padding: 5% 0; ) #child (padding: 10% 0; )

В код Примерен CSSгорното и долното поле са зададени и за двата елемента. За вложен елемент настройката на подложката ще служи за центрирането му вертикално. И подложката на родителския елемент ще центрира вложения елемент в него.

Относителните единици се използват за динамично преоразмеряване на елементи. А за абсолютни мерни единици ще трябва да направите изчисленията.

Например, ако родителският елемент е висок 400px, а вложеният елемент е висок 100px, тогава са необходими 150px подложка отгоре и отдолу.

150 + 150 + 100 = 400

Използването на % позволява изчисленията да бъдат оставени на браузъра.

Този метод работи навсякъде. Недостатъкът е необходимостта от изчисления.

Забележка:Този метод работи чрез задаване на границата на елемента. Можете също да използвате полета в елемент. Решението за прилагане на полета или подложка трябва да се вземе в зависимост от спецификата на проекта.

плаващ div

Този метод използва празен елемент div, който плава и помага да се контролира позицията на нашия вложен елемент в документа. Имайте предвид, че плаващият div се поставя преди нашия вложен елемент в HTML кода.

HTML:

CSS:

#parent (височина: 250px;) #floater (float: ляво; височина: 50%; ширина: 100%; margin-bottom: -50px; ) #child (чисто: и двете; височина: 100px;)

Изместваме празния div наляво или надясно и му даваме височина от 50% от родителския елемент. По този начин ще запълни горната половина на родителския елемент.

Тъй като този div е плаващ, той се премахва от нормалния поток на документа и трябва да развием вложения елемент. Примерът използва clear: both, но е достатъчно да се използва същата посока като отместването на плаващия празен елемент div.

Горната граница на вложения div елемент е точно под долната граница на празния div елемент. Трябва да преместим вложения елемент нагоре с половината от височината на плаващия празен елемент. За да се реши проблемът, се използва отрицателна стойност на свойството margin-bottom за плаващ празен елемент div.

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

Заключение

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