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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.5. Абсолютно блоково позициониране

в центъра на страницата

в центъра на блока

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

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

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

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

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

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

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

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

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

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

div( фон: #ccc; подложка: 30px 0; )

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

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

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

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

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

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

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

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

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

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

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

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

Подравняването на текста го определя външен види ориентацията на краищата на абзаца и може да бъде ляво, дясно, центрирано или двустранно. В табл. 1 показва опциите за подравняване на текстови блокове.

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

Абзацният таг обикновено се използва за задаване на подравняване на текста.

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