У дома Безопасност Хоризонтално и вертикално подравняване на елементите. Как да направите подравняване на текст в центъра, ширината, краищата на страницата в HTML

Хоризонтално и вертикално подравняване на елементите. Как да направите подравняване на текст в центъра, ширината, краищата на страницата в HTML

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

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%; )

Много често задачата е да подравните блока към центъра на страницата / екрана и дори така, че без 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; > .inner ( дисплей: клетка-таблица; подравняване на текст: център; вертикално подравняване: среда; ) ) .block ( дисплей: inline-block; img ( дисплей: блок; рамка: няма; ) )

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

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

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

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

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

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

Вариант 5. Flexbox.

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

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

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

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

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

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

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

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

Бонус

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

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

Влад Мержевич

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

Вертикално центриране

Един от начините да покажете на посетителя фокуса и заглавието на сайта е да използвате начална страница. Това е първата страница, на която по правило има флаш интро или картина, изразяваща основната идея на сайта. Изображението е и връзка към други раздели на сайта. Необходимо е да поставите тази снимка в центъра на прозореца на браузъра, независимо от резолюцията на монитора. За целта можете да използвате таблица с ширина и височина равна на 100% (пример 1).

Пример 1: Центриране на картина

подравняване

В този пример хоризонталното подравняване се задава с помощта на параметъра на етикета align="center". , и не е необходимо съдържанието на клетката да бъде центрирано вертикално, тъй като тази позиция е зададена по подразбиране.

За да зададете височината на таблицата на 100%, премахнете, кодът вече не е валиден.

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

Хоризонтално подравняване

Чрез комбиниране на атрибутите align (хоризонтално подравняване) и valign ( вертикално подравняване) етикет , е допустимо да се зададат няколко вида позиции на елементи един спрямо друг. На фиг. 1 показва как да подравните елементи хоризонтално.

Нека да разгледаме някои примери за подравняване на текст според фигурата по-долу.

Горно подравняване

За да укажете подравняването на съдържанието на клетката към горната част, за етикета необходимо е да зададете атрибута valign със стойност top (пример 2).

Пример 2: Използване на valign

подравняване

Колона 1

Колона 2

В този пример характеристиките на клетката се контролират с помощта на параметри на тагове , но също така е по-удобно да се променят чрез стилове. По-специално, подравняването на клетките се определя от свойствата vertical-align и text-align (пример 3).

Пример 3: Прилагане на стилове за подравняване

подравняване

Колона 1

Колона 2

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

Подравняването отдолу се извършва по същия начин, но се използва bottom вместо top .

Централно подравняване

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

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

Пример 4: Подравняване на формула

подравняване

(18.6)

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

Подравняване на елементи на формата

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

За да може текстът в близост до полетата на формуляра да бъде подравнен вдясно, а самите елементи на формуляра да бъдат подравнени вляво, ви е необходима таблица с невидима рамка и две колони. Лявата колона ще съдържа самия текст, а дясната колона ще съдържа текстови полета (пример 5).

Пример 5 Подравняване на полета на формуляр

подравняване

В този пример атрибутът align="right" е добавен за клетки, които изискват дясно подравняване. За да може етикетът „Коментар“ да бъде разположен в горната граница на многоредовия текст, съответната клетка е подравнена отгоре с помощта на атрибута valign.