От автора:Приветствам ви отново на страниците на нашия блог. В днешната статия бих искал да говоря за различни техники за подравняване, които могат да бъдат приложени както към блоковете, така и към тяхното съдържание. По-конкретно как да подравнявате блоковете в css, както и подравняването на текста.

Подравняване на блокове към центъра

В css подравняването на блок към центъра е лесно. Това е най-известната техника за мнозина, но бих искал да ви разкажа за нея преди всичко. Приема се, че е центриран хоризонтално по отношение на родителския елемент. Как се прави? Да приемем, че имаме контейнер и нашия тестов обект е в него:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

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

#header ( ширина / макс - ширина: 800px; марж: 0 автоматично;

Трябва да посочим точната или максималната ширина и след това да напишем ключовото свойство - margin: 0 auto. Той задава полетата за нашата заглавка, първата стойност е горното и долното поле, а втората е дясното и лявото поле. Автоматична стойност казва на браузъра автоматично да изчисли запълването от двете страни, така че елементът да е точно в центъра на своя родител. Удобни!

Подравняване на текста

Това също е много прост трик. За да подравните всички вградени елементи, можете да използвате свойството text-align и неговите стойности: ляво, дясно, център. Последният центрира текста, от което се нуждаем. Дори една картина може да бъде подравнена по същия начин, тъй като тя също е вграден елемент по подразбиране.

Подравнете текста вертикално

Но това е по-сложно. По подразбиране няма просто, добре познато свойство, което лесно да центрира текста в блоков контейнер вертикално. Въпреки това, има няколко техники, които дизайнерите на оформление са измислили през годините.

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

div (фон: #ccc; padding: 30px 0;)

div ( фон: #ccc; допълване: 30px 0;

Фонът е само за визуално виждане на ръбовете, както и подплънките. Сега височината на блока се състои от тези две отстъпи и самата линия и всичко изглежда така:

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

div (височина: 60px; височина на реда: 60px;)

div ( височина: 60px; линия - височина: 60px;

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

Преобразуване на блок в клетка на таблица. Същността на този метод е, че свойството vertical-align: middle действа върху клетката на таблицата, която центрира елемента вертикално. Съответно, в този случай блокът трябва да бъде настроен, както следва:

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

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

Хубавото на този метод е, че можете да центрирате толкова текст, колкото искате. Но за блока, в който е вложен нашият div, е по-добре да регистрирате display: table, в противен случай може да не работи.

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

Задайте отстъпи в проценти. Ако знаете височината на родителския елемент и поставите друг блоков елемент в него, тогава можете да го центрирате, като използвате процентно запълване. Например, родителят е висок 600px. Поставяте блок в него с височина 300px. Колко отгоре и отдолу са ви необходими, за да отстъпите назад, за да го центрирате? 150 пиксела всеки, което е 25% от височината на родителя.

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

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

И ако в допълнение към това напишем и margin: 0 auto, тогава елементът ще бъде в центъра и хоризонтално!

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

Нека започнем с общо описание на проблема.

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

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

Повечето хора, когато използват свойството 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 се прилага за клетките на таблицата, където работи чудесно. Можем да изобразим нашия елемент като клетка на таблица и да използваме свойството vertical-align за него, за да центрира вертикално съдържанието.

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

HTML:

CSS:

#parent (display: table;) #child (display: table-cell; vertical-align: middle;)

Задаваме табличния изход за родителския 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:

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

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

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

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

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

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

HTML:

CSS:

#parent (adding: 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 (clear: и двете; височина: 100px;)

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

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

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

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

Заключение

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

Много често задачата е да се подравни блокът в центъра на страницата/екранът и дори така, че без java скрипт, без да се задават твърди размери или отрицателни полета, така че лентите за превъртане да работят за родителя, ако блокът надвиши неговия размер . В мрежата има много монотонни примери за това как да подравните блок към центъра на екрана. По правило повечето от тях се основават на едни и същи принципи.

По-долу са основните начини за решаване на проблема, техните плюсове и минуси. За да разберете същността на примерите, препоръчвам да намалите височината / ширината на прозореца Резултат в примерите на посочените връзки.

Вариант 1. Отрицателен отстъп.

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

Родител (ширина: 100%; височина: 100%; позиция: абсолютна; отгоре: 0; отляво: 0; преливане: автоматично;) .block (ширина: 250px; височина: 250px; позиция: абсолютна; отгоре: 50%; отляво : 50%; поле: -125px 0 0 -125px; img (макс. ширина: 100%; височина: автоматично; дисплей: блок; поле: 0 автоматично; граница: няма;))

Вариант 2. Автоматичен отстъп.

По-рядко срещан, но подобен на първия. За блокзадайте ширината и височината, позиционирайте горния десен долен ляв атрибут на 0 и задайте автоматично полето. Предимството на тази опция е работещите ленти за превъртане при родителако последният има 100% ширина и височина. Недостатъкът на този метод е твърдото оразмеряване.

Родител (ширина: 100%; височина: 100%; позиция: абсолютна; отгоре: 0; отляво: 0; преливане: автоматично;) .block (ширина: 250px; височина: 250px; позиция: абсолютна; отгоре: 0; отдясно: 0; отдолу: 0; вляво: 0; поле: автоматично; img (максимална ширина: 100%; височина: автоматично; дисплей: блок; поле: 0 автоматично; граница: няма;))

Вариант 3. Таблица.

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

Родител (ширина: 100%; височина: 100%; дисплей: таблица; позиция: абсолютна; горна част: 0; ляво: 0;> .вътрешен (дисплей: клетка-таблица; подравняване на текст: център; вертикално подравняване: средно); )) .block (дисплей: inline-block; img (дисплей: блок; граница: няма;))

За да добавите превъртане към този пример, ще трябва да добавите още един елемент към конструкцията.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.

Вариант 4. Псевдоелемент.

Тази опция е лишена от всички проблеми, изброени в предишните методи, и също така решава първоначално поставените задачи. Изводът е това родителзадайте стилове псевдоелементпреди, а именно 100% височина, централно подравняване и вграден модел кутия. Същото е и с блокмоделът на линейния блок е зададен, централно подравняване. Да се блокне е "попаднал" под псевдоелементкогато размерът на първия е по-голям от родител, посочете родителбяло пространство: nowrap и размер на шрифта: 0, последвано от блокзаменете тези стилове със следното - бяло пространство: нормално. В този пример размерът на шрифта: 0 е необходим, за да се премахне полученото пространство между тях родители блоквъв връзка с форматирането на кода. Пространството може да бъде премахнато по други начини, но най-добре е просто да не го позволявате.

Родител (ширина: 100%; височина: 100%; позиция: абсолютна; отгоре: 0; вляво: 0; преливане: автоматично; бяло пространство: nowrap; подравняване на текст: център; размер на шрифта: 0; &: преди ( височина: 100%; дисплей: вграден блок; вертикално подравняване: средно; съдържание: "";)) .блок (дисплей: вграден блок; бяло пространство: нормално; вертикално подравняване: средно; подравняване на текст: ляво ; img (дисплей: блок; граница: няма;))

Или, ако трябва родителят да заема само височината и ширината на прозореца, а не цялата страница:

Родител (позиция: фиксирана; отгоре: 0; отдясно: 0; отдолу: 0; отляво: 0; преливане: автоматично; бяло пространство: nowrap; подравняване на текст: център; размер на шрифта: 0; &: преди (височина: 100%; дисплей: вграден блок; вертикално подравняване: средно; съдържание: "";)) .блок (дисплей: вграден блок; бяло пространство: нормално; вертикално подравняване: средно; подравняване на текст: ляво; img (дисплей: блок; граница: няма;))

Вариант 5. Flexbox.

Един от най-простите и елегантни начини е използването на flexbox. Той не изисква ненужни движения на тялото, доста ясно описва същността на случващото се, има висока гъвкавост. Единственото нещо, което си струва да запомните, когато избирате този метод, е поддръжката на IE от версия 10 включително. caniuse.com/#feat=flexbox

Родител (ширина: 100%; височина: 100%; позиция: фиксирана; отгоре: 0; отляво: 0; дисплей: flex; align-items: център; align-content: център; justify-content: център; преливане: автоматично; ) .block (фон: # 60a839; img (дисплей: блок; граница: няма;))

Вариант 6. Трансформиране.

Подходящо, ако сме ограничени от структурата и няма начин да се манипулира родителския елемент, а блокът трябва да бъде подравнен някак си. Функцията translate () css идва на помощ. При 50% абсолютното позициониране ще позиционира горния ляв ъгъл на полето точно в центъра, след което отрицателна стойност на превод ще премести полето спрямо собствените му размери. Имайте предвид, че негативните ефекти могат да се появят под формата на замъглени ръбове или стил на шрифта. Също така, този метод може да доведе до проблеми с изчисляването на позицията на блока с помощта на java-script "a. Понякога, за да компенсира загубата на 50% от ширината поради използването на оставеното свойство css, наборът от правила за блока може помощ: margin-right: -50%;.

Родител (ширина: 100%; височина: 100%; позиция: фиксирана; отгоре: 0; отляво: 0; преливане: автоматично;) .блок (позиция: абсолютна; отгоре: 50%; отляво: 50%; трансформиране: превод ( -50%, -50%); img (дисплей: блок;))

Вариант 7. Бутон.

Потребителски azproduction вариант къде блоке поставен в рамка в етикета на бутона. Бутонът има способността да центрира всичко вътре в него, а именно елементите на моделите inline и inline-block. На практика не препоръчвам да го използвате.

Родител (ширина: 100%; височина: 100%; позиция: абсолютна; отгоре: 0; отляво: 0; преливане: автоматично; фон: няма; граница: няма; контур: няма;) .block (дисплей: inline-block; img (дисплей: блок ;; граница: няма;))

Бонус

Използвайки идеята за 4-та опция, е възможно да зададете маржове за блок, а последният ще бъде адекватно показан, заобиколен от ленти за превъртане.
Пример: jsfiddle.net/serdidg/nfqg9rza/2.

Можете също да подравните картината в центъра и ако картината е по-голяма родител, мащабирайте го, за да пасне родител.
Пример: jsfiddle.net/serdidg/nfqg9rza/3.
Пример с голяма снимка:

Ако изрежете всеки уебсайт, базиран на html, тогава ще видите определена структура слой по слой. Освен това по външния си вид ще прилича на бутер тесто. Ако мислите така, най-вероятно не сте яли дълго време. Така че първо нахранете глада си и след това ще ви покажем как да центрирате div слоя на вашия сайт:

Предимства на маркирането

Има два основни типа изграждане на структура на сайта:

• Табличен;
• Блоков.

Оформлението на таблицата е доминиращо от зората на Интернет. Неговите предимства включват точността на посоченото позициониране. Но въпреки това има очевидни недостатъци. Основните са обемът на кода и ниската скорост на изтегляне.

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

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

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

Блокова сграда въз основа на тагове