Від автора:Знову вітаю вас на сторінках нашого блогу. У сьогоднішній статті я хотів би розповісти про різні прийоми вирівнювання, яке можна застосовувати як до блоків, так і до їхнього вмісту. Зокрема, як вирівняти блоки в CSS, а також про вирівнювання тексту.
Вирівнювання блоків по центру
У css легко вирівняти блок по центру. Це найвідоміший для багатьох прийом, але про нього я хотів би розповісти саме зараз, насамперед. Тут мається на увазі вирівнювання центром по горизонталі щодо батьківського елемента. Як воно здійснюється? Допустимо, у нас є контейнер і в ньому наш піддослідний:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Припустимо, що це шапка сайту. Вона не тягнеться на всю ширину вікна і нам треба відцентрувати її. Пишемо так:
#header( width/max-width: 800px; margin: 0 auto; |
Нам потрібно вказати точну чи максимальну ширину, після чого записати ключову властивість margin: 0 auto. Воно задає зовнішні відступи нашій шапці, перше значення визначає відступи зверху та знизу, а друге – праворуч та ліворуч. Значення auto дає команду браузеру автоматично розрахувати відступи з обох боків так, щоб елемент був по центру батьківського. Зручно!
Вирівнювання тексту
Це також дуже простий прийом. Для вирівнювання всіх малих елементів можна використовувати властивість text-align та її значення: left, right, center. Останнє центрує текст, що нам потрібно. Так само можна вирівняти навіть картинку, тому що вона теж за умовчанням є малим елементом.
Вирівнювання тексту по вертикалі
А ось це вже складніше. За замовчуванням немає такої простої загальновідомої властивості, яка легко центрувала б текст у блоковому контейнері по вертикалі. Проте є кілька прийомів, які за роки роботи вигадали верстальники.
Встановіть висоту блоку за допомогою внутрішніх відступів. Спосіб полягає в тому, щоб не задавати явну висоту за допомогою height, а створити її штучно за допомогою paddingів зверху та знизу, які мають бути однакові. Створимо будь-який блок і запишемо такі властивості:
div( background: #ccc; padding: 30px 0; )
div ( background: #ccc; padding: 30px 0; |
Фон просто для того, щоб візуально бачити краї, а також внутрішні відступи. Тепер висоту блоку складають два ці відступи і сам рядок, а виглядає все це так:
Визначити для блоку line-height. Мені здається, це правильніший спосіб, якщо вам треба вирівняти один рядок тексту. При ньому ви можете записати висоту по нормальному, за допомогою свійсва height. Після цього йому потрібно задати висоту рядка, таку ж, як і висота блоку в цілому.
div( height: 60px; line-height: 60px; )
div ( height: 60px; line-height: 60px; |
Результат буде аналогічний вищенаведеній картинці. Все буде працювати, навіть якщо ви додасте внутрішні відступи. Однак тільки для одного рядка. Якщо вам потрібно більше тексту в елементі, цей спосіб працювати не буде.
Перетворити блок на комірку таблиці. Суть цього у тому, що з осередку таблиці діє властивість vertical-align: middle, яке центрує елемент по вертикалі. Відповідно, у цьому випадку блоку потрібно задати таке:
div( display: table-cell; vertical-align: middle; )
div ( display: table-cell; vertical-align: middle; |
Цей спосіб хороший тим, що ви зможете вирівняти скільки завгодно тексту по центру. Але блоку, в який вкладено наш div, краще прописати display: table, інакше може не працювати.
Ну ось ми і підійшли до останнього на сьогодні прийому – це вирівнювання блоків по вертикалі. Потрібно сказати, що тут знову ж таки немає властивості, яка призначалася б спеціально для цього, але є кілька прийомів, про які ви повинні знати.
Задати відступи у відсотках. Якщо ви знаєте висоту батьківського елемента і поміщаєте в нього ще один блоковий елемент, то можна відцентрувати його за допомогою відсоткових відступів. Наприклад, батько має висоту 600 пікселів. Ви поміщаєте блок, який має висоту 300 пікселів. Скільки вам потрібно відступити зверху та знизу, щоб відцентрувати його? По 150 пікселів, а це 25% від висоти батька.
Цей спосіб дозволяє зробити центрування тільки коли розміри дозволяють зробити обчислення. А якщо у вас батько 887 пікселів заввишки, то точно записати нічого не вийде, це й так зрозуміло.
Вставити елемент у комірку таблиці. Знову ж таки, якщо ми перетворимо батьківський елемент на комірку таблиці, то вставлений у нього блок автоматично відцентрується по вертикалі. Для цього батьку лише потрібно задати vertical-align: middle.
А якщо ще до цього записати ще й margin: 0 auto, то елемент і по горизонталі стане в центр!
Доброго часу доби, передплатники та читачі цієї публікації. Сьогодні я хочу вдатися до подробиць та розповісти вам, як у css вирівняти текст по центру. У деяких попередніх статтях я опосередковано торкався цієї теми, тому деякі знання в цій галузі у вас є.
Однак у цій публікації я розповім вам про всілякі способи вирівнювання об'єктів, а також поясню, як робити відступи та червоні рядки в абзацах. Тож давайте приступати до вивчення матеріалу!
Html та його дітища та align
Даний спосіб майже не використовується, оскільки його витіснили інструменти стильних каскадних таблиць. Однак знання, що такий тег існує, вам не завадить.
Що стосується валідації (цей термін докладно описаний у статті « »), то в самій специфікації html засуджується використання < center>, так як для валідності необхідно використовувати перехідний DOCTYPE>.
Такий типпропускає заборонені елементи.
Тепер перейдемо до атрибуту align. Він задає горизонтальне вирівнювання об'єктів і вписується після оголошення тега. Зазвичай з його допомогою можна вирівняти контент по лівому краю ( left), по правому краю ( right), по центру ( center) та за шириною тексту ( justify).
Нижче я наведу приклад, в якому картинку та абзац розташую по центру.
Цей контент буде розташований центром.
Зауважте, що для картинки атрибут, що розбирається нами, має дещо інші значення.
У прикладі я використав align="middle". Завдяки цьому зображення вирівнялося так, що пропозиція розташувалася чітко посередині картинки.
Інструменти центрування в CSS
Css-властивості, призначені для вирівнювання блоків, текстового та графічного контенту, користуються набагато частіше. Це пов'язано насамперед із зручністю та гнучкістю реалізації стилів.
Отже, почнемо з першої якості центрування тексту - це text-align.
Воно функціонує так само, як і align у . Серед ключових слів можна вибрати одне із загального списку або успадкувати характеристики предка ( inherit).
Хочу зазначити, що в css3 можна встановити ще два параметри: start– в залежності від правил написання тексту (праворуч ліворуч або навпаки) встановлює вирівнювання зліва або праворуч (аналогічно роботі left або right) та end- Протилежний start (при написанні тексту зліва направо діє як right, при написанні праворуч наліво - left).
Пропозиція справа
Пропозиція з використанням end
Розповім про невелику фішку. При виборі значення justifyостанній рядок може негарно бовтатися знизу. Для того, щоб її, наприклад, розташувати по центру, можна скористатися властивістю text-align-last.
Для вирівнювання вмісту сайту або осередків таблиць по вертикалі використовується властивість vertical-align. Нижче описано основні ключові слова елемента.
| Ключове слово | Призначення |
| baseline | Вказує вирівнювання по лінії предка, яка називається базовою. Якщо такої лінії у предка-предка немає, то вирівнювання відбувається по нижньому border-у. |
| middle | Середина видозмінюваного об'єкта вирівнюється по базовій лінії, до якої додається підлога висоти елемента-батька. |
| bottom | Нижня частина вибраного контенту підлаштовується під основу об'єкта, що знаходиться нижче за всіх. |
| top | Аналогічно bottom, тільки з верхньою частиною об'єкта. |
| super | Робить символ надрядковим. |
| sub | Робить елемент підрядковим. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Ц УЕ ТПроДо
|
Відступи
І, нарешті, ми дійшли з вами до відступів в абзаці. У мові css використовується спеціальна властивість під назвою text-indent.
З його допомогою можна зробити як червоний рядок, так і виступ (потрібно вказати негативне значення).
Для створення червоного рядка потрібно знати лише один параметр.
Їм є просте властивість text-indent.
Хвалю тих, хто випробував кожен приклад на практиці. Надсилайте посилання на мій блог друзям і не забувайте підписуватись. Успіхів! Бувай!
З повагою, Роман Чуєшов
Прочитано: 675 разів
Дуже часто стоїть завдання вирівняти блок по центру сторінки/екрану, та ще й так, щоб без ява-скрипту, без завдання жорстких розмірів або негативних відступів, ще щоб і скроллбари працювали у батька, якщо блок перевищує його розміри. У мережі ходять досить багато одноманітних прикладів, як вирівняти блок по центру екрана. Зазвичай більшість їх засновані на одних принципах.
Нижче представлені основні способи вирішення задачі, їх плюси та мінуси. Щоб розуміти суть прикладів, рекомендую зменшити висоту/ширину віконця Result у прикладах за вказаними посиланнями.
Варіант 1. Негативний відступ.
Позиціонуємо блокатрибутами top і left на 50%, і заздалегідь знаючи висоту і ширину блоку, задаємо негативний margin, що дорівнює половині розміру блоку. Величезним мінусом цього варіанта є те, що потрібно підраховувати негативні відступи. Так само блокне зовсім коректно поводиться в оточенні скроллбарів - він просто обрізається, оскільки має негативні відступи.
Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 50%; left : 50%; margin: -125px 0 0 -125px; img ( max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ) )
Варіант 2. Автоматичний відступ.
Менш поширений, але схожий на перший. Для блокузадаємо ширину та висоту, позиціонуємо атрибутами top right bottom left на 0, і задаємо margin auto. Плюсом даного варіанту є робочі скроллбари у батькаякщо у останнього задана 100% ширина і висота. Мінусом цього спосіб є жорстке завдання розмірів.
Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ))
Варіант 3. Таблиця.
Задаємо батьковітабличні стилі, осередку батькавстановлюємо вирівнювання тексту центром. А блокузадаємо модель рядкового блоку. Мінусами ми отримуємо не робочі скроллбари, і загалом не естетичність "емуляції" таблиці.
Parent ( width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )
Щоб додати скролл в даний приклад, доведеться додати конструкцію ще один елемент.
Приклад: jsfiddle.net/serdidg/fk5nqh52/3.
Варіант 4. Псевдоелемент.
Даний варіант позбавлений всіх проблем, перерахованих у попередніх способів, а також вирішує поставлені завдання. Суть полягає в тому, щоб у батьказадати стилі псевдо-елементу before, а саме 100% висоту, вирівнювання по центру та модель рядкового блоку. Так само і в блокуставиться модель рядкового блоку, вирівнювання центром. Щоб блокне «падав» під псевдо-елементколи розміри першого більші батька, вказуємо батькові white-space: nowrap і font-size: 0, після чого у блокускасовуємо ці стилі наступними - white-space: normal. У даному прикладі font-size: 0 потрібен для того, щоб прибрати пробіл, що утворився між батькомі блокому зв'язку із форматуванням коду. Прогалину можна прибрати й іншими способами, але найкращим вважається просто її не допускати.
Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; height: 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; img (display: block; border: none;))
Або, якщо вам потрібно, щоб батько займав лише висоту та ширину вікна, а не всієї сторінки:
Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; ( display: block; border: none; ) )
Варіант 5. Flexbox.
Одним із найпростіших та найелегантніших способів є використання flexbox. Він не вимагає зайвих рухів тіла, досить зрозуміло описує суть того, що відбувається, має високу гнучкість. Єдине, що варто пам'ятати при виборі цього способу - підтримка IE від 10 версії включно. caniuse.com/#feat=flexbox
Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )
Варіант 6. Transform.
Підходить якщо ми обмежені структурою, і немає можливості маніпулювати батьківським елементом, а блок вирівняти якось потрібно. На допомогу прийде css функція translate(). При 50% абсолютне позиціонування розташує верхній лівий кут блоку точно по центру, потім негативне значення translate зрушить блок щодо своїх власних розмірів. Врахуйте, що можуть спливти негативні ефекти у вигляді розмитих граней або зображення шрифту. Також подібний спосіб може призвести до проблем з обчисленням положення блоку за допомогою java-script"а. Іноді для компенсації втрати 50% ширини через використання css властивості left може допомогти задане блоку правило: margin-right: -50%; .
Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%);img (display: block; ))
Варіант 7. Кнопка.
Користувач варіант, де блокобрамляється в button тег. Кнопка має властивість центрувати все, що знаходиться в неї всередині, а саме елементи малої та блочно-рядкової (inline-block) моделі. На практиці використати не рекомендую.
Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; ) .block ( display: inline-block; img ( display: block;; border: none; ) )
Бонус
Використовуючи ідею 4-го варіанта, можна задавати зовнішні відступи для блоку, і при цьому останній адекватно відображатиметься в оточенні скроллбарів.Приклад: jsfiddle.net/serdidg/nfqg9rza/2.
Так само можна вирівнювати картинку по центру, і якщо картинка більше батькамасштабувати її за розміром батька.
Приклад: jsfiddle.net/serdidg/nfqg9rza/3.
Приклад з великою картинкою:
Верстка та вирівнювання по центру сторінок сайту є творчою справою і у початківців часто викликає труднощі. Тож давайте подивимося, як це зробити. Припустимо, ми хочемо зробити сторінку такої структури:
Наша сторінка складається з чотирьох блоків: шапки (header), меню (menu), вмісту (content) та низу сайту (footer). Для вирівнювання по центру сторінки ми помістимо ці чотири блоки до одного головного блоку (main):
Шапка сайту
Вміст
Низ сайту
На прикладі цієї структури розглянемо кілька варіантів.
Верстка та центрування гумового сайту
При верстці гумового сайту основною одиницею вимірювання, що використовується, є - %, адже сайт повинен розтягуватися по ширині і займати весь вільний простір.
Отже, ширина блоків "header" та "footer" становитиме 100% ширини екрану. Ширина блоку "menu" нехай буде 30%, а блок "content" повинен розташовуватися поруч із блоком "menu", тобто. він повинен мати ліве поле (margin-left) шириною, що дорівнює ширині блоку "menu", тобто. 30%.
Щоб блоки "menu" і "content" розташовувалися поруч, зробимо блок "menu" плаваючим і притиснемо його до лівого краю. Також поставимо кольори фону (background) для наших блоків. Тепер запишемо все це до таблиці стилів (на сторінці style.css)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :left;width:30%;height:300px;text-align:center;color:#FFFFFF;font-size:18px;padding-top:10px; ) #content( background:#ffffff; margin-left:30% ; height:300px;text-align:center; ) #footer( background:#3e4982; clear:both; width:100%; height:50px; text-align:center; padding-top:10px;
Висоту блоків задали умовно, щоб було видно результат. Подивіться на нашу сторінку у браузері:
Якщо ви змінюватимете розміри вікна браузера, то буде змінюватися ширина всіх блоків. Не завжди зручно, т.к. при розтягуванні блоку меню з'являється порожнє місце. Тому частіше ширину блоку "menu" роблять фіксованою, давайте й ми так зробимо. Для цього замінимо в таблиці стилів значення відповідних властивостей:
... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...
Тепер наша сторінка розтягується природніше. При гумовій верстці сторінки займають всю ширину екрана, тому вирівнювання центром сторінок не потрібно.
Але якщо хочеться можна зробити так, щоб ваша сторінка мала рівні відступи ліворуч та праворуч екрану. Для цього треба додати стиль блоку "main", який є контейнером для решти всіх блоків:
Тепер наша сторінка виглядає так:
Верстка та центрування сайту, фіксованої ширини
У цьому випадку нам доведеться задати фіксовані розміри наших блоків:
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left: 200px; height: 300px; text-align: center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; size:14px; padding-top:10px;
Зараз наша сторінка притиснута до лівого краю екрану.
У цьому випадку вирівнювання центром сторінок сайту можна здійснити наступним чином. Згадаймо, що наша сторінка має тег "body", якому також можна задати ширину і якісь відступи.
Зробимо так: задаємо тегу "body" ширину 800 пікселів (як і у блоку "main") і лівий відступ (padding-left) в 50%. Тоді весь вміст блоку "main" відображатиметься у правій частині екрана (тобто від середини вправо):
Щоб наш блок "main" розташовувався посередині екрана, треба, щоб його середина збігалася з серединою тега "body". Тобто. треба змістити блок "main" ліворуч на половину свого розміру. Ширина блоку "main" - 800 пікселів, отже треба задати йому властивість "margin-left:-400px". Так, ця властивість може набувати негативних значень, тоді ліве поле зменшується (тобто зрушується вліво). А саме це нам і потрібне.
Тепер таблиця стилів виглядає так:
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px;height:50px;text-align:center;color:#FFFFFF;font-size:14px;padding-top:10px;
А наша сторінка в браузері розташовується посередині:
Ми розглянули два варіанти вирівнювання центром сторінок сайту, насправді вони не є догмою. Ви можете поекспериментувати і вигадати свій варіант, тільки перевіряйте його роботу в різних браузерах. На жаль, те, що добре відображається в FireFox або Opera, може абсолютно незрозуміло відображатися в IE і навпаки. І це треба пам'ятати.
Успіхів Вам у ваших творчих пошуках!
Я думаю, багато хто з вас, кому доводилося займатися версткою, стикалися з необхідністю вирівнювати елементи по вертикалі і знають, які складності виникають при вирівнюванні елемента по центру.
Так, для вертикального вирівнювання CSS є спеціальна властивість vertical-align з безліччю значень . Однак на практиці воно працює зовсім не так, як очікується. Спробуймо в цьому розібратися.
Порівняємо такі підходи. Вирівнювання за допомогою:
- таблиці,
- відступів,
- line-height ,
- розтягування,
- негативного margin,
- transform,
- псевдоелемента,
- flexbox.
Є два елементи div, при цьому один із них вкладений в інший. Дамо їм відповідні класи – outer та inner.
Завдання полягає в тому, щоб вирівняти внутрішній елемент центром зовнішнього елемента.
Для початку розглянемо випадок, коли розміри зовнішнього та внутрішнього блоку відомі. Додамо внутрішньому елементу правило display: inline-block , а зовнішньому – text-align: center та vertical-align: middle .
Пригадую, що вирівнювання застосовується лише до елементів, які мають режим відображення inline або inline-block.
Задамо блокам розміри, а також фонові кольори, щоб бачити їхні межі.
Outer ( width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc; )
Після застосування стилів ми побачимо, що внутрішній блок вирівнявся по горизонталі, а по вертикалі немає:
http://jsfiddle.net/c1bgfffq/
Чому так сталося?Справа в тому, що властивість vertical-align впливає на вирівнювання самого елемента, а не його вмісту(крім випадків, коли воно застосовується до осередків таблиці). Тому застосування цієї властивості до зовнішнього елементу нічого не дало. Більше того, застосування цієї властивості до внутрішнього елемента також нічого не дасть, оскільки малі блоки (inline-block) вирівнюються по вертикалі щодо сусідніх блоків, а в нашому випадку у нас один рядковий блок.
Для вирішення цієї проблеми існує кілька технік. Нижче розглянемо кожну з них.
Вирівнювання за допомогою таблиці
Перше приходить на думку рішення - замінити зовнішній блок таблицею з одного осередку. У цьому випадку вирівнювання буде застосовуватися до вмісту комірки, тобто внутрішнього блоку.
http://jsfiddle.net/c1bgfffq/1/
Очевидний мінус цього рішення – з погляду семантики неправильно застосовувати таблиці для вирівнювання. Другий мінус у тому, що для створення таблиці потрібно додати ще один елемент навколо зовнішнього блоку.
Перший мінус можна частково прибрати, замінивши теги table і td на div і задавши табличний режим відображення CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Проте зовнішній блок все одно залишиться таблицею з усіма наслідками, що з цього випливають.
Вирівнювання за допомогою відступів
Якщо висоти внутрішнього і зовнішнього блоку відомі, вирівнювання можна задати за допомогою вертикальних відступів у внутрішнього блоку, використовуючи формулу: (H outer - H inner) / 2.Outer ( height: 200px; ) .inner ( height: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Мінус рішення - воно застосовується лише в обмеженій кількості випадків, коли відомі висоти обох блоків.
Вирівнювання за допомогою line-height
Якщо відомо, що внутрішній блок повинен займати не більше одного рядка тексту, можна скористатися властивістю line-height і задати його рівним висоті зовнішнього блоку. Оскільки контент внутрішнього блоку не повинен переноситися на другий рядок, також рекомендується додати правила white-space: nowrap і overflow: hidden .Outer ( height: 200px; line-height: 200px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/
Також цю техніку можна застосовувати і для вирівнювання багаторядкового тексту, якщо для внутрішнього блоку перевизначити значення line-height, а також додати правила display: inline-block і vertical-align: middle.
Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/
Мінус даного способу полягає в тому, що має бути відома висота зовнішнього блоку.
Вирівнювання за допомогою "розтягування"
Цей спосіб можна застосовувати, коли висота зовнішнього блоку невідома, але відома висота внутрішнього.Для цього потрібно:
- задати зовнішньому блоку відносне позиціонування, а внутрішньому – абсолютне;
- додати внутрішньому блоку правила top: 0 і bottom: 0 , у результаті він розтягнеться всю висоту зовнішнього блоку;
- встановити значення auto для вертикальних відступів внутрішнього блоку.
http://jsfiddle.net/c1bgfffq/4/
Суть цієї техніки полягає в тому, що завдання висоти для розтягнутого і абсолютно спозиційованого блоку змушує браузер обчислювати вертикальні відступи в рівному співвідношенні, якщо значення встановлено в auto .
Вирівнювання за допомогою негативного margin-top
Цей спосіб набув широкої популярності і застосовується дуже часто. Як і попередній він застосовується, коли висота зовнішнього блоку невідома, але відома висота внутрішнього.Потрібно задати зовнішньому блоку відносне позиціонування, а внутрішньому – абсолютне. Потім необхідно зрушити внутрішній блок вниз на половину висоти зовнішнього блоку top: 50% і підняти нагору на половину власної висоти margin-top: -H inner / 2.
Outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Мінус даного способу повинна бути відома висота внутрішнього блоку.
Вирівнювання за допомогою transform
Цей спосіб схожий на попередній, але він може бути застосований, коли висота внутрішнього блоку невідома. У цьому випадку замість завдання негативного відступу в пікселях можна скористатися властивістю transform і підняти внутрішній блок вгору за допомогою функції translateY і значення -50%.Outer ( position: relative; ) .inner ( position: absolute; top: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Чому у попередньому способі не можна було задати значення у відсотках? Так як відсоткові значення властивості margin обчислюються щодо батьківського елемента, значення 50% дорівнювало б половині висоти зовнішнього блоку, а нам потрібно було підняти внутрішній блок на половину його власної висоти. Для цього якраз підходить властивість transform.
Мінус цього способу - він не може бути застосований, якщо внутрішній блок має абсолютну позиціонування.
Вирівнювання за допомогою Flexbox
Найсучасніший спосіб вертикального вирівнювання це використовувати Flexible Box Layout (у народі відомий як Flexbox). Даний модуль дозволяє гнучко керувати позиціонуванням елементів на сторінці, маючи в своєму розпорядженні їх практично як завгодно. Вирівнювання по центру для Flexbox дуже проста задача.Зовнішньому блоку необхідно встановити display: flex , а внутрішньому − margin: auto . І це все! Гарно, правда?
Outer ( display: flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/
Мінус цього способу – Flexbox підтримується лише сучасними браузерами.
Який спосіб вибрати?
Потрібно виходити з постановки завдання:- Для вертикального вирівнювання тексту краще використовувати вертикальні відступи або властивість line-height.
- Для абсолютно позиціонованих елементів із відомою висотою (наприклад, іконок) ідеально підійде спосіб з негативною властивістю margin-top.
- Для складніших випадків, коли невідома висота блоку, потрібно використовувати псевдоелемент або властивість transform.
- А якщо вам пощастило настільки, що не потрібно підтримувати старі версії браузера IE, то, звичайно, краще використовувати Flexbox.
