Досега сме подравнявали елементи само отляво. По-точно, ние изобщо не направихме това и самият браузър подравнява елементите вляво по подразбиране. Разбира се, би било твърде скучно да подравнявате всичко отляво. Следователно има различни начиницентрално и дясно подравняване.
Подравняването на елементи е нещо, което просто трябва да знаете кога. Първото нещо, което трябва да направите, е да напишете най-простата страница.
Имало едно време един етикет
Можете също да добавите центрирано изображение, нека също да преминем към следващия ред с помощта на етикета
:
Заглавие от ниво 1 центрирано
Беше етикет
За да решат този проблем, разработчиците излязоха с универсален начин за подравняване на елементи. HTML. Методът е да се използват така наречените контейнери, които се създават с помощта на тага Нека сега напишем същото HTML код, но с използването на контейнери, освен това, нека не подравняваме в центъра, а вдясно. Както можете да видите, всичко работи. Съветвам ви също да промените стойността на атрибута " подравнете", за да разгледате други видове подравняване на съдържанието на контейнера. Друг начин за подравняване на елементи HTML- това са таблици, но тази тема заслужава отделна дискусия, така че ще говорим за нея в една от следващите статии. Засега вашата страница трябва да изглежда така: С уважение, Михаил Русаков. P.S.Ако искате да научите повече за HTMLтогава погледнете моя безплатен курсс пример за създаване на сайт на HTML: Ако изрежете който и да е сайт, създаден на базиран на html, тогава ще видите определена слоеста структура. И техния външен видще бъде подобно на пластова торта. Ако мислите така, тогава най-вероятно не сте яли от дълго време. Така че първо задоволявайте глада си, а след това ще ви покажем как да центрирате div слоя на вашия сайт: Има два основни вида изграждане на структура на сайта: Табличното оформление е доминиращо от зората на Интернет. Предимствата му включват точността на даденото позициониране. Но въпреки това има очевидни недостатъци. Основните са обемът на кода и ниска скоростизтегляния. Когато използвате таблично оформление, уеб страницата няма да се покаже, докато не се зареди напълно. Докато при използване на div блокове, елементите се изобразяват незабавно. С изключение висока скоростизтегляне блок конструкция на сайта позволява няколко пъти да се намали силата на звука html код. Включително чрез използването на CSS класове. Трябва обаче да се използва таблично оформление за структуриране на показването на данни на страницата. Класически пример за използването му е показването на таблици. Изграждане на блокове на базата на тагове При блоково оформление позиционирането на слоя се извършва най-добре с помощта на каскадни стилови листове. Основното свойство на CSS, което отговаря за позицията Помислете за лек пример за позициониране на div с помощта на това свойство:
В следващия пример ще използваме контейнерен слой, за да поставим останалите елементи върху него. Това решава проблема с изместването на блоковете един спрямо друг, когато прозорецът се преоразмерява. Центрирането на контейнера в средата става чрез задаване на свойствата на полето нулева стойностполета отгоре и автоматично отстрани (поле: 0 автоматично):
След промяната всички блокове ще се подредят строго в един ред в средата. И тяхната позиция няма да се промени при какъвто и да е размер на прозореца на браузъра. Ето как изглежда div, центриран вертикално: Колкото и странно да звучи, възможно е. Понякога div блок като връзка може да е необходим при оформление различни видовеменю. Помислете за практически пример за внедряване на слой за връзка:
Блоковите елементи предоставят повече възможности за разширяване на функционалността на интерфейса, отколкото остарялото таблично оформление. Често се случва дизайнът на сайта да е уникален и разпознаваем. Но трябва да платите за такава изключителна липса на свободно пространство. Особено се отнася начална страница, разходите за реклама на които са най-високи. Ето защо възниква проблемът къде да "бутнем" още един рекламен банер. И тук не можете да се разминете с подравняването на div към центъра на страницата! По-рационално решение е да направите някакъв блок скрит. Ето прост пример за такова изпълнение:
Това е магическият бутон. Щракването върху него ще скрие или покаже скрития блок. Центрирането на елементи вертикално с CSS е предизвикателство за разработчиците. Има обаче няколко метода за решаването му, които са доста прости. Този урок представя 6 опции за вертикално центриране на съдържание. Да започнем с общо описаниезадачи. Хоризонталното центриране е много просто и лесно. Когато центрираният елемент е вграден, използвайте свойството за подравняване спрямо родителския елемент. Когато елементът е блоков елемент, задаваме неговата ширина и автоматична инсталацияляво и дясно поле. Повечето хора използват свойство за подравняване на текст: достъп до свойството за вертикално подравняване, за да центрирате вертикално. Всичко изглежда съвсем логично. Ако сте използвали шаблони за таблици, вероятно сте използвали широко атрибута valign, което затвърждава убеждението, че вертикалното подравняване е правилният начин. Но атрибутът valign работи само върху клетки на таблица. И свойството vertical-align е много подобно. Също така засяга клетките на таблицата и някои вградени елементи. Стойността на свойството vertical-align е относителна към родителския вграден елемент. Но за съжаление, свойството vertical-align не работи на елементи на ниво блок (като параграфи в елемент div). Тази ситуация може да доведе до идеята, че няма решение на проблема с вертикалното подравняване. Но има и други методи за центриране на елементи на ниво блок, чийто избор зависи от това какво се центрира по отношение на външния контейнер. Този методработи, когато искате вертикално да центрирате един ред текст. Всичко, което трябва да направите, е да зададете височината на реда да бъде по-голяма от размера на шрифта. По подразбиране свободното пространство ще бъде разпределено равномерно над и под текста. И линията ще бъде центрирана вертикално. Често височината на линията се прави равна на височината на елемента. #child (line-height: 200px;) Този метод работи във всички браузъри, въпреки че може да се използва само за един ред. Стойността от 200 px в примера е избрана произволно. Можете да използвате всяка стойност, по-голяма от размера на шрифта на текста. Ами ако съдържанието е изображение? Горният метод ще работи ли? Отговорът се крие в друг ред от CSS код. #parent (line-height: 200px;) #parent img (vertical-align: middle;) Стойността на свойството line-height трябва да е по-голяма от височината на изображението. Както бе споменато по-горе, свойството за вертикално подравняване се прилага към клетките на таблицата, където работи чудесно. Можем да визуализираме нашия елемент като клетка на таблица и да използваме свойството vertical-align върху него, за да центрираме съдържанието вертикално. Забележка: CSS таблица не е същата като HTML таблица. #родител (дисплей: таблица;) #дете ( дисплей: клетка-таблица; вертикално подравняване: средата;) Задаваме изхода на таблицата на родителския div и изобразяваме вложения div като клетка на таблица. Сега можете да използвате свойството vertical-align на вътрешния контейнер. Всичко в него ще бъде центрирано вертикално. За разлика от метода по-горе, в този случай съдържанието може да бъде динамично, тъй като елементът div ще преоразмерява, за да пасне на съдържанието си. Недостатъкът на този метод е, че не работи в по-стари версии на IE. Трябва да използвате свойството display: inline-block за вложения контейнер. Този метод също работи във всички браузъри. Но това изисква центрираният елемент да получи височина. Примерният код прави хоризонтално и вертикално центриране едновременно: #parent (позиция: относителна;) #child (позиция: абсолютна; горе: 50%; ляво: 50%; височина: 30%; ширина: 50%; поле: -15% 0 0 -25%; ) Първо задаваме вида на позициониране на елементите. След това във вложения div задайте горните и левите свойства на 50%, което е центърът на родителския елемент. Но центърът удря отляво горен ъгълвложен елемент. Следователно трябва да го повдигнете нагоре (половината от височината) и да го преместите наляво (половината от ширината), след което центърът ще съвпадне с центъра на родителския елемент. Така че в този случай е необходимо да знаете височината на елемента. След това даваме на елемента отрицателни горни и леви полета, равни съответно на половината от височината и ширината. Този метод не работи във всички браузъри. Примерният код извършва вертикално и хоризонтално центриране. #родител (позиция: относителна;) #дете (позиция: абсолютна; горна: 0; долна: 0; ляво: 0; дясно: 0; ширина: 50%; височина: 30%; поле: автоматично; ) Идеята зад този метод е да разтегнете вложения елемент до всичките 4 граници на родителския елемент, като зададете свойствата отгоре, отдолу, отдясно и отляво на 0. Задаването на автоматично формиране на полета от всички страни ще доведе до задачата равни стойностиот всичките 4 страни и ще доведе нашия вложен div елемент до центъра на родителския елемент. За съжаление, този метод не работи в IE7 и по-стари версии. Този метод изрично задава равни подложки над и под родителския елемент. #parent (padding: 5% 0; ) #child (padding: 10% 0; ) В код Примерен CSSгорното и долното поле са зададени и за двата елемента. За вложен елемент настройката на подложката ще служи за центрирането му вертикално. И подложката на родителския елемент ще центрира вложения елемент в него. Относителните единици се използват за динамично преоразмеряване на елементи. А за абсолютни мерни единици ще трябва да направите изчисленията. Например, ако родителският елемент е висок 400px, а вложеният елемент е висок 100px, тогава са необходими 150px подложка отгоре и отдолу. 150 + 150 + 100 = 400 Използването на % позволява изчисленията да бъдат оставени на браузъра. Този метод работи навсякъде. Недостатъкът е необходимостта от изчисления. Забележка:Този метод работи чрез задаване на границата на елемента. Можете също да използвате полета в елемент. Решението за прилагане на полета или подложка трябва да се вземе в зависимост от спецификата на проекта. Този метод използва празен елемент div, който плава и помага да се контролира позицията на нашия вложен елемент в документа. Имайте предвид, че плаващият div се поставя преди нашия вложен елемент в HTML кода. #parent (височина: 250px;) #floater (float: ляво; височина: 50%; ширина: 100%; margin-bottom: -50px; ) #child (чисто: и двете; височина: 100px;) Изместваме празния div наляво или надясно и му даваме височина от 50% от родителския елемент. По този начин ще запълни горната половина на родителския елемент. Тъй като този div е плаващ, той се премахва от нормалния поток на документа и трябва да развием вложения елемент. Примерът използва clear: both, но е достатъчно да се използва същата посока като отместването на плаващия празен елемент div. Горната граница на вложения div елемент е точно под долната граница на празния div елемент. Трябва да преместим вложения елемент нагоре с половината от височината на плаващия празен елемент. За да се реши проблемът, се използва отрицателна стойност на свойството margin-bottom за плаващ празен елемент div. Този метод също работи във всички браузъри. Използването му обаче изисква допълнителен празен елемент div и познаване на височината на вложения елемент. Всички описани методи са лесни за използване. Трудността се състои в това, че никой от тях не е подходящ за всички случаи. Необходимо е да се анализира проектът и да се избере този, който най-добре отговаря на изискванията. Уеб дизайнерите използват DIV всеки ден на работа. Без преувеличение, това е най-популярният етикет. Отворете изходния код на всеки сайт и ще видите, че повечето, ако не и две трети от обектите са затворени в Името на елемента идва от английската дума division, което означава деление. Когато пишете маркиране, той се използва за разделяне на елементи на блокове. DIV обхваща групи от съдържание на уеб страница. Например изображения, параграфи с текст. Тагът не влияе по никакъв начин на показването на съдържание и не носи никакво семантично натоварване. DIV поддържа всички глобални атрибути. Но за уеб дизайн ви трябват само две - клас и идентификатор. За всичко останало ще си спомните само в екзотични случаи, а това не е факт. Атрибутът align, който се използваше за центриране или ляво подравняване на div, е отхвърлен. Представете си, че сайтът е хладилник, а DIV са пластмасови контейнери, по които трябва да сортирате съдържанието. Няма да слагате плодове в един и същи съд с черен дроб. Всеки вид продукт поставяте отделно. Уеб съдържанието се генерира по подобен начин. Отворете всеки сайт и го разделете на семантични блокове. Горен колонтитул отгоре, долен колонтитул отдолу, основен текст в центъра. Отстрани обикновено има по-малка колона с промоционално съдържание или облак от етикети.
Сега разглобете всеки раздел по-подробно. Започнете със заглавката. Заглавката на сайта има отделно лого, навигация, заглавие от първо ниво и понякога слоган. Задайте свой собствен контейнер към всеки семантичен блок. Това не само ще раздели елементите в потока, но и ще улесни форматирането им. Ще бъде много по-лесно за вас да центрирате обекта в тага DIV, като му дадете клас или ID. Когато изобразява уеб елементи, браузърът взема предвид три свойства: подложка, поле и рамка. padding е пространството между съдържанието и неговата граница. Маржин - полета, разделящи един обект от друг. Границите са линии по протежение на блоковете. Те могат да бъдат присвоени наведнъж от всички или само от едната страна: Тези свойства добавят свободно пространство между обектите и също така им помагат да се подравнят и поставят по желание. Например, ако блок с картина трябва да бъде изместен от левия край към центъра с 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. За да повдигнете или намалите елемент, използвайте и отрицателни стойности. Но в този случай те могат да бъдат присвоени или към горното, или към долното поле на контейнера. Това е лесен начин за центриране на големи блокове. Просто задавате ширината на контейнера и свойството margin на auto. Браузърът ще постави блока в средата с еднакви полета отляво и отдясно, вършейки цялата работа сам. В резултат на това не рискувате да се объркате в математическите изчисления и значително спестявате време. Използвайте метода за автоматично маржиране, когато разработвате адаптивни приложения. Ключът е да дадете на контейнера стойност за ширина в em или проценти. Кодът от примера по-горе ще центрира DIV на всяко устройство, включително Мобилни телефони, ще заема 90% от екрана. По подразбиране DIV елементите се считат за блокови елементи и имат показана стойност на блок. За този метод ще трябва да замените това свойство. Подходящо само за DIV с родителски контейнер: На елемент с клас outer-div се присвоява свойство text-align със стойност center, което центрира текста вътре. Но засега браузърът вижда вложения DIV като блоков обект. За да работи свойството text-align, inner-div трябва да се третира като inline. Следователно, в CSS таблицаза селектора inner-div пишете следния код: Inner-div( display: inline-block; ) Променяте свойството за показване от block на inline-block. Каскадните стилови таблици ви позволяват да местите, изкривявате, завъртате и трансформирате уеб елементи по желание. За това се използва свойството transform. Желаният тип трансформация и степента са посочени като стойности. В този пример ще работим с превод: Функцията за превод премества елемент от текущата му позиция наляво/надясно и нагоре/надолу. Две стойности се предават в скоби: Ако елементът трябва да се премести само по една от координатните оси, тогава след думата за превод посочвате името на оста и в скоби количеството на необходимото изместване: Трансформация: translateY(-20%); В някои ръководства можете да видите трансформация с префикси на доставчика: преобразуване на webkit: превод (50%, 50%); -ms-трансформация: превод (50%, 50%); трансформиране: превод (50%, 50%); През 2018 г. това вече не е необходимо, свойството се поддържа от всички браузъри, включително Edge и IE. За да центрираме DIV, от който се нуждаем, CSS функцията translate е написана със стойност 50% за вертикалната и хоризонталната ос. Това ще накара браузъра да премести елемента от текущата му позиция до половината от неговата ширина и височина. Свойствата за ширина и височина трябва да бъдат посочени:
Имайте предвид, че елементът, към който е приложено свойството transform, се движи независимо от обектите около него. От една страна, това е удобно, но понякога се движи, DIV може да припокрие друг контейнер. Следователно този метод за центриране на уеб компоненти се счита за нестандартен и се използва само в спешни случаи. За анимация се използват трансформации по всички CSS канони. 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. Този метод е много по-рационален, ако съдържа разнообразно съдържание, включително графики, други вложени обекти, включително многостепенни списъци. Всеки дизайнер на оформление постоянно се сблъсква с необходимостта да подреди съдържанието в блок: хоризонтално или вертикално. Има няколко добри статии по този въпрос, но всички те предлагат много интересни, но малко практични опции, поради което трябва да губите допълнително време, за да подчертаете основното. Реших да подам тази информация в удобния за мен вид, за да не търся повече в гугъл. Най-лесният начин да използвате CSS е да подравните кутии, които имат известна височина (за вертикално подравняване) или ширина (за хоризонтално подравняване). Понякога можете да не центрирате елемент, но да добавите граници към него със свойството " подплата". Например, има картина 200 на 200 пиксела и искате да я центрирате в блок от 240 на 300. Можем да зададем височината и ширината външно тяло= 200px и добавете 20 пиксела за горната и долната част и 50 за лявото и дясното. Ако блокът е настроен на " позиция: абсолютна", тогава той може да бъде позициониран спрямо най-близкия родител с "position: relative". За това всички свойства (" Горна част","точно","отдолу","наляво") на вътрешния блок, за да присвоите същата стойност, както и "margin: auto". *Има един нюанс: Ширината (височината) на вътрешния блок + стойността на ляво (дясно, долу, горе) не трябва да надвишава размера на родителския блок. По-безопасно е да зададете свойствата отляво (отдясно, отдолу, отгоре) на 0 (нула). За подравняване на текст в блок има специално свойство " подравняване на текст". Когато е зададено на " център" всеки ред текст ще се подравни хоризонтално. За многоредов тексттова решение се използва изключително рядко, по-често тази опция може да се намери за подравняване на участъци, връзки или снимки. Веднъж трябваше да измисля текст, за да покажа как работи подравняването на текст, когато CSS помощно нищо интересно не ми хрумна. Първоначално реших да копирам някъде детска песен, но се сетих, че това може да развали уникалността на статията и нашите скъпи читатели няма да могат да я намерят в Google. И тогава реших да напиша този абзац тук - все пак смисълът не е в него, а в подравняването. Струва си да се отбележи, че това свойство ще работи не само за текст, но и за всички вградени елементи („display: inline“). Но този текст е подравнен вляво, но е в блок, който е центриран спрямо обвивката. Елементите на ниво блок с известна ширина лесно се подравняват хоризонтално, като ги зададете на "маржин-ляво: автоматично; маржин-дясно: автоматично". Обикновено се използва съкращението: " марж: 0 авто" (вместо нула може да има произволна стойност). Но за вертикално подравняване този метод няма да работи. Ето как си струва да подравните всички блокове, където е възможно (където не е необходимо фиксирано или абсолютно позициониране) - това е най-логичното и адекватно. Въпреки че това изглежда очевидно, понякога съм виждал плашещи примери с отрицателни отстъпи, така че реших да изясня. Има много повече проблеми с вертикалното подравняване - очевидно това не е предвидено в CSS. Има няколко начина да постигнете желания резултат, но всички те не са много красиви. В случай, че има само един ред в блока, можете да постигнете вертикалното му подравняване, като приложите " височина на линията" и да го зададете на желаната височина. За по-сигурно трябва да зададете и "height", чиято стойност ще бъде равна на стойността на "line-height", тъй като последното не се поддържа във всички браузъри. Също така е възможно да подравните блок с множество редове. За да направите това, ще трябва да използвате допълнителен обвиващ блок и да му зададете височината на линията. Вътрешният блок може да бъде многоредов, но трябва да е "inline". Трябва да приложите "vertical-align: middle" към него. Обвиващият блок трябва да има зададен "font-size: 0". Ако не зададете размера на шрифта на нула, тогава браузърът ще добави няколко допълнителни пиксела от себе си. Ще трябва също да посочите размера на шрифта и височината на реда за вътрешния блок, тъй като тези свойства са наследени от родителя. Имот " вертикално подравняване" също засяга клетките на таблицата. Със стойността, зададена на "middle", съдържанието вътре в клетката е центрирано. Разбира се, табличното оформление се счита за архаично в наши дни, но в изключителни случаи може да бъде симулирано чрез указване на " дисплей: клетка-таблица". Обикновено използвам тази опция за вертикално подравняване. По-долу е даден пример за оформление, взет от готов проект. Картината, която е центрирана вертикално по този начин, представлява интерес. Трябва да се помни, че ако елементът има набор "float", различен от "none", тогава той все още ще бъде блок (display: block) - тогава ще трябва да използвате допълнителна обвивка на блок. А за вградени елементи можете да приложите " вертикално подравняване: по средата". В този случай всички елементи с " дисплей: вграден", които са на една и съща линия, ще се изравнят с обща централна линия. Трябва да създадете спомагателен блок с височина, равна на височината на родителския блок, след което желаният блок ще бъде центриран. За това е удобно да използвате псевдоелементи:before или:after. Ако не ви пука много за потребителите на Explorer 8 или ви пука толкова много, че сте готови да поставите част от допълнителен javascript за тях, тогава може да се използва "display: flex". Кутиите Flex се справят с проблемите с подравняването наистина добре и е достатъчно да напишете „margin: auto“, за да центрирате съдържанието вътре. Досега този метод практически никога не ме е срещал, но няма специални ограничения за него. Е, това е всичко, за което исках да пиша CSS подравняване. Сега центрирането на съдържанието няма да е проблем!
Заглавие от ниво 1 центрирано
Заглавие от ниво 1, подравнено вдясно
Предимства на оформлението с помощта на етикет
Помощни средства за позициониране
Синтаксис на свойството:
float: ляво | надясно | няма | наследяват,
Където:
Ляв блок
десен блок
Сега нека се опитаме да използваме същото свойство, за да позиционираме третия div в центъра на страницата. Но за съжаление float няма централна стойност. И когато на нов блок се даде стойност за подравняване надясно или наляво, той се измества в указаната посока. Следователно остава само да настроите и трите блока да плават: left : 
Но и това не е най-добрият вариант. При намаляване на прозореца всички слоеве се подреждат в един ред вертикално, а при увеличаване на размера се придържат към левия край на прозореца. Така че имаме нужда от по-добър начин за центриране на div. Центриране на слоеве
Ляв блок
централен блок
десен блок
Същият този пример показва как можете да центрирате div хоризонтално. И ако леко редактирате горния код, тогава можете да постигнете вертикално подравняване на блоковете. За да направите това, просто трябва да промените дължината на контейнерния слой (да го намалите). Тоест, след редактиране на неговия css, класът трябва да изглежда така: 
В следващия пример, за да центрираме слоевете вътре в контейнера, използвахме серия от нови css свойства
:
Кратко описание на свойствата на css и техните стойности, които използвахме този примерза центриране на div вътре в div: Как да направите връзка от слой
В този пример, използвайки реда display: block , задаваме връзката към стойността на блоков елемент. И за да направите цялата височина на div да стане връзка, задайте височина: 100%. Скриване и показване на блокови елементи
Проблем с вертикалното центриране
метод на височината на линията
HTML:
CSS:
Центриране на изображение с височина на линията
HTML:
CSS:
CSS табличен метод
HTML:
CSS:
Абсолютно позициониране и отрицателни маржове
HTML:
CSS:
Абсолютно позициониране и разтягане
HTML:
CSS:
Еднаква подплата отгоре и отдолу
HTML:
CSS:
плаващ div
HTML:
CSS:
Заключение
Какво е DIV
Кога да използвате DIVs
Центрирайте DIV с полета
Как да центрирате блок div с помощта на автоматични полета
Подравняване чрез дисплея на свойствата: inline-block
метод за преобразуване/превод
Работа с Flexbox оформление
Правила за поставяне на гъвкави елементи
Подравняване на блокове с известни размери
Подравняване с подложка
Подравняване на абсолютно позиционирани блокове
Хоризонтално подравняване
Подравняване с "text-align: center"
Подравняване на блокове с полета
Вертикално подравняване
Подравняване със свойството line-height
Вертикално подравняване в таблици
Подравняване с допълнителен вграден елемент
Дисплей: гъвкавост и подравняване
