Центрування елементів по вертикалі за допомогою CSS є завданням, яке становить певну труднощі для розробників. Однак є кілька методів її вирішення, які є досить простими. У цьому уроці представлено 6 варіантів вертикального центрування змісту.
Почнемо з загального описузавдання.
Завдання вертикального центрування
Горизонтальне центрування виконується дуже легко. Коли центрований елемент є малим, використовуємо властивість вирівнювання щодо батьківського елемента. Коли елемент блоковий - задаємо йому ширину і автоматичне встановленнялівого та правого полів.
Більшість людей, використовуючи властивість text-align: звертаються до властивості vertical-align для центрування по вертикалі. Все має досить логічний вигляд. Якщо ви використовували табличні шаблони, то, напевно, активно використовували атрибут valign , який зміцнює віру в те, що vertical-align правильний шлях до вирішення задачі.
Але атрибут valign працює тільки в осередках таблиці. А властивість vertical-align дуже схожа на нього. Воно також діє на комірки таблиці та деякі малі елементи.
Значення властивості vertical-align діє по відношенню до батьківського рядкового елементу.
- У рядку тексту вирівнювання виконується по відношенню до висоти рядка.
- У осередку таблиці використовується вирівнювання стосовно величини, що обчислюється спеціальним алгоритмом (зазвичай виходить висота рядка).
Але, на жаль, властивість vertical-align не діє блокових елементах (наприклад, параграфах всередині елемента div ). Таке становище може призвести до думки, що розв'язання задачі вертикального вирівнювання немає.
Але є інші методи центрування блокових елементів, вибір яких залежить від того, що центрується по відношенню до зовнішнього контейнера.
Метод line-height
Цей методпрацює, коли ви хочете центрувати вертикально один рядок тексту. Все, що потрібно зробити - це задати висоту рядка більше, ніж розмір шрифту.
За замовчуванням вільний простір буде рівномірно розподілено зверху і знизу тексту. І рядок буде відцентрований вертикально. Часто висоту рядка роблять рівною висоті елемента.
HTML:
CSS:
#child ( line-height: 200px; )
Цей метод працює у всіх браузерах, хоча використовувати його можна лише для одного рядка. Значення 200 px у прикладі вибрано довільно. Можна використовувати будь-які величини більше за розмір шрифту тексту.
Центрування зображення за допомогою line-height
А що якщо зміст є картинкою? Чи буде описаний вище метод працювати? Відповідь полягає в ще одному рядку коду 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 (position: relative;) #child ( position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; )
Спочатку встановлюємо тип позиціонування елементів. Потім вкладеного елемента div встановлюємо значення властивостей top і left рівними 50%, що відповідає центру батьківського елемента. Але в центр потрапляє верхній лівий кут вкладеного елемента. Тому потрібно підняти його вгору (на половину висоти) і зрушити ліворуч (на половину ширини), і тоді центр співпаде із центром батьківського елемента. Отже знання висоти елемента у разі необхідно. Потім задаємо елементу негативні значення верхнього та лівого полів рівними половині висоти та ширини відповідно.
Цей метод працює не у всіх браузерах.
Абсолютне позиціонування та розтягування
У коді прикладу виконується центрування по вертикалі та горизонталі.
HTML:
CSS:
#parent (position: relative;) #child ( position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; )
Ідея даного методу полягає в тому, щоб розтягнути вкладений елемент до всіх 4 меж батьківського елемента за допомогою установки властивостей top, bottom, right, та left значення 0.
Установка автоматичного формування полів з усіх боків приведе до завдання рівних значень з усіх 4 сторін і виведе вкладений елемент div по центру батьківського елемента.
На жаль, цей метод не працює в IE7 і нижче.
Рівні відступи зверху та знизу
У цьому методі явно задаються рівні відступи зверху і знизу батьківського елемента.
HTML:
CSS:
#parent ( padding: 5% 0; ) #child ( padding: 10% 0; )
У коді CSS приклад відступи зверху і знизу задаються для обох елементів. Для вкладеного елемента установка відступів буде служити для вертикального центрування. А відступи батьківського елемента центруватимуть вкладений елемент у ньому.
Для динамічного зміни розмірів елементів використовуються відносні одиниці виміру. А для абсолютних одиниць виміру доведеться зробити розрахунки.
Наприклад, якщо батьківський елемент має висоту 400 px, а вкладений елемент - 100px, необхідні відступи 150px зверху і знизу.
150 + 150 + 100 = 400
Використання % дозволяє розрахунки залишити браузеру.
Цей метод працює скрізь. Зворотною стороною є потреба у розрахунках.
Примітка:Цей метод працює за рахунок встановлення зовнішніх відступів елемента. Ви також можете використовувати поля всередині елемента. Рішення про застосування полів чи відступів слід приймати залежно від специфіки проекту.
Плаваючі div
Цей метод використовує порожній елемент div , який плаває і допомагає керувати положенням вкладеного елемента в документі. Зауважте, що плаваючий div розміщується до нашого вкладеного елемента в коді HTML.
HTML:
CSS:
#parent (height: 250px;) #floater ( float: left; height: 50%; width: 100%; margin-bottom: -50px; ) #child ( clear: both; height: 100px; )
Ми зміщуємо порожній div ліворуч або праворуч і задаємо для нього висоту 50% батьківського елемента. Таким чином, він заповнюватиме верхню половину батьківського елемента.
Оскільки цей div є плаваючим, він видаляється зі звичайного потоку документа, і нам потрібно скасувати обтікання текстом для вкладеного елемента. У прикладі використовується clear: both, але цілком достатньо використовувати також напрямок, що і зміщення плаваючого порожнього елемента div.
Верхня межа вкладеного елемента div знаходиться безпосередньо під нижньою межею порожнього елемента div. Нам потрібно змістити вкладений елемент вгору половину висоти плаваючого порожнього елемента. Для вирішення задачі використовується негативне значення якості margin-bottom для плаваючого порожнього елемента div .
Цей метод також працює у всіх браузерах. Однак його використання вимагає додаткового порожнього елемента div та знань про висоту вкладеного елемента.
Висновок
Усі описані методи прості у використанні. Проблема полягає в тому, що жоден з них не підходить для всіх випадків. Потрібно аналізувати проект і вибирати той, який найкраще підходить під вимоги.
Якщо розрізати будь-який сайт, створений на основі html, то перед вами постане якась пошарова структура. Причому своїм зовнішнім виглядомвона схожа з листковим пирогом. Якщо вам так здається, то найімовірніше ви давно не їли. Тому спочатку вгамуйте свій голод, а потім ми розповімо вам про те, як розташувати шар div по центру вашого сайту:
Переваги верстки за допомогою тега
Існує два основних типи побудови структури сайту:
- Таблична;
- Блокова.
Таблична верстка була домінуючою ще на зорі зародження інтернету. До її переваг можна зарахувати точність заданого позиціонування. Але, тим не менш, вона має явні недоліки. Головними з них є об'ємність коду та низька швидкість завантаження.
Під час використання табличної верстки веб-сторінка не відображатиметься аж до повного завантаження. У той час, як при використанні блоків div елементи відображаються відразу.
Крім високої швидкості завантаження блокова побудова сайту дозволяє в кілька разів зменшити обсяг коду html. У тому числі й за рахунок використання класів CSS.
Проте табличну верстку слід використовувати для структуризації відображення даних на сторінці. Класичним прикладом застосування є відображення таблиць.
Блокова побудова на основі тегів
також називають шаровим, а самі блоки шарами. Це пов'язано з тим, що при використанні певних значень властивостей їх можна розміщувати один поверх іншого подібно до шарів у Photoshop.
Засоби позиціонування
У блоковій верстці позиціонування шарів краще здійснювати за допомогою каскадних таблиць стилів. Основною властивістю CSS, що відповідає за розташування
, є float.
Синтаксис властивості:
float: left | right | none | inherit,
Де:
- left – вирівнювання елемента лівим краєм екрана. Обтікання іншими елементами відбувається праворуч;
- right – вирівнювання праворуч, обтікання іншими елементами – ліворуч;
- none - обтікання не допускається;
- inherit – наслідування значення батьківського елемента.
Розглянемо полегшений приклад позиціонування блоків div за допомогою цієї властивості:
Лівий блок
Правий блок
Тепер постараємося за допомогою цієї властивості розташувати третій div по центру сторінки. Але, на жаль, у float немає значення . А при заданні новому блоку значення вирівнювання праворуч або ліворуч він зсувається у вказану сторону. Тому залишається лише всім трьом блокам поставити float: left :
Але і це не є оптимальним варіантом. При зменшенні вікна всі шари вишиковуються в один ряд по вертикалі, а при збільшенні розмірів – прилипають до лівого краю вікна. Тому потрібен досконаліший спосіб вирівнювання div по центру.
Центрування шарів
У наступному прикладі ми використовуватимемо шар-контейнер, в якому розмістимо інші елементи. Це вирішує проблему усунення блоків один щодо одного при зміні розмірів вікна. Центрування контейнера посередині здійснюється за допомогою завдання властивостей margin нульового значення відступів від верхнього краю та auto з боків (margin: 0 auto ):
Лівий блок
Центральний блок
Правий блок
Цей приклад показує, як можна відцентрувати div по горизонталі. А якщо трохи відредагувати наведений вище код, то можна досягти вертикального вирівнювання блоків. Для цього потрібно лише змінити довжину шару-контейнера (зменшити його). Тобто після редагування його css клас має виглядати так:
Після зміни всі блоки вишикуються строго в ряд посередині. І їхнє положення не зміниться за будь-яких розмірів вікна браузера. Ось як виглядає таке центрування div центром по вертикалі:
У наступному прикладі для центрування шарів усередині контейнера ми використали низку нових властивостей css :
Короткий опис властивостей css та їх значень, які ми використовували в даному прикладі для центрування div всередині div :
- display: inline-block – вирівнює блоковий елемент у рядок та забезпечує його обтікання іншим елементом;
- vertical-align: middle – вирівнює елемент посередині щодо батьківського;
- margin-left – встановлює відступ зліва.
Як з шару зробити посилання
Хоч як дивно звучить, але таке можливо. Іноді div блок як посилання може знадобитися у верстці різних видівменю. Розглянемо практичний прикладреалізації шару-посилання:
Посилання на наш сайт
У цьому прикладі за допомогою рядка display: block ми задали посилання значення блокового елемента. Щоб вся висота блоку div стала посиланням, встановили height : 100%.
Приховування та відображення блокових елементів
Блокові елементи надають більше можливостей розширення функціоналу інтерфейсу, ніж застаріла таблична верстка. Часто буває, що дизайн сайту є унікальним та впізнаваним. Але за такий ексклюзив доводиться платити за браком вільного місця.
Особливо це стосується головної сторінкивартість розміщення реклами на якій є найвищою. Тому і виникає проблема, куди б «впхнути» ще один рекламний банер. І тут вже вирівнюванням div по центру сторінки ніяк не відбудешся!
Більше раціональним рішеннямє зробити який-небудь блок, що ховається. Ось простий приклад такої реалізації:
Це чарівна кнопка. Натискання на неї приховає або відобразить блок, що приховується.
У цьому прикладі розташування div блоків не змінюється. Тут використовується найпростіша функція JavaScript, що змінює значення властивості css display після натискання на кнопку ( подія onclick).
Синтаксис display:
display: block | inline | inline-block | inline-table | List-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Як бачите, ця властивість може набувати безліч значень. Тому дуже корисним і може використовуватися для позиціонування елементів. В одному з попередніх прикладів за допомогою одного з його значень ( inline-block) ми реалізували вирівнювання div всередині div центром.
Для приховування та показу шару ми використовували два значення властивості display.
У CSS деякі на перший погляд прості речі виявляється не так просто виконати. Однією з таких речей є вирівнювання, тобто. коли один елемент необхідно розташувати певним чином відносного іншого.
У цій статті представлені деякі готові рішення, які допоможуть спростити роботу з центрування елементів по горизонталі та/або по вертикалі.
Примітка: під кожним рішенням наведено список браузерів із зазначенням версій, у яких зазначений CSS-код працює.
CSS - Вирівнювання блоку по центру
1. Вирівнювання одного блоку по центру іншого. При цьому перший та другий блок мають динамічні розміри.
...
...
Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%) -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) ;)
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Вирівнювання одного блоку по центру іншого. При цьому другий блок має фіксовані розміри.
Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; /* ширина і висота 2 блоки */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px;
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Вирівнювання одного блоку по центру іншого. У цьому другий блок має розміри, задані у відсотках.
Parent ( position: relative; ) .child ( position: absolute; /* ширина і висота 2 блоки в % */ height: 50%; width: 50%; /* Значення визначаються залежно від його розміру в % */ left: 25%;/* (100% - width) / 2 */ top: 25%;
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Вирівнювання по горизонталі
1. Вирівнювання одного блокового елемента (display: block) щодо іншого (в якому він розташований) по горизонталі:
...
...
Block ( margin-left: auto; margin-right: auto; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Вирівнювання рядкового (display: inline) або рядково-блочного (display: inline-block) елемента по горизонталі:
...
...
Parent ( text-align: center; ) .child ( display: inline-block; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Вирівнювання по вертикалі
1. Відцентрувати один елемент (display: inline, display: inline-block) щодо іншого (в якому він розташований) по центру. Батьківський блок у цьому прикладі має фіксовану висоту, яка задається за допомогою властивості CSS line-height.
...
...
Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрування одного блоку щодо іншого по вертикалі у вигляді батьки як таблиці, а дитини як осередки цієї таблиці.
Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Якщо Ви знаєте якісь інші цікаві хитрощі або корисні рішення з вирівнювання, то поділіться ними в коментарях.
Доброго дня! Продовжуємо освоювати основи мови HTML. Подивимося, що потрібно писати, щоб вирівняти текст по центру, ширині або краям.
Переходячи до справи, розглянемо, як у HTML зробити текст центром трьома. різними способами. Останні два пов'язані безпосередньо з таблицею стилів. Вона може являти собою файл CSS, який підключається до сторінок сайту та задає їхній вигляд.
Спосіб 1 - пряма робота з HTML
Насправді, все досить просто. Дивіться приклад нижче.
Вирівнювання абзацу по центру.
Якщо потрібно зрушити текстові фрагменти іншим чином, замість параметра «center» прописуємо наступні значення:
- justify – вирівнювання тексту за шириною сторінки;
- right - по правому краю;
- left – по лівому.
За аналогією можна зрушити контент, що знаходиться в заголовках (h1, h2), контейнері (div).
Спосіб 2 та 3 - використання стилів
Конструкцію, представлену вище, можна злегка трансформувати. Ефект буде таким самим. Для цього потрібно прописати поданий нижче код.
Текстовий блок.
У такому вигляді код прописується безпосередньо HTML для вирівнювання текстового контенту по центру.
Є ще альтернативний варіантдосягти результату. Потрібно буде зробити кілька дій.
Крок 1. В основному написати
Текстовий матеріал.
Крок 2. У файлі CSS, що підключається, вписати наступний код:
Rovno (text-align:center;)
Зазначу, що слово «rovno» це лише назва класу, який можна назвати і по-іншому. Це залишається на розсуд програміста.
За аналогією HTML можна запросто зробити текст по центру, ширині, а також вирівняти по правому або лівому краю сторінки. Як бачите, є далеко не один варіант досягти мети.
Усього кілька запитань:
- Робите інформаційний некомерційний проект?
- Бажаєте, щоб сайт добре просувався в пошукових системах?
- Бажаєте отримувати дохід у мережі?
Якщо всі відповіді позитивні, то просто подивіться на комплексний підхід до розвитку сайту. Інформація виявиться особливо корисною, якщо вона працює на CMS WordPress.
Хотілося б відзначити, що власні сайти - це лише один з безлічі варіантів сформувати пасивний або активний дохід на просторах інтернету. Мій блог якраз присвячений фінансовим можливостямв мережі.
Чи працювали колись у сфері арбітражу трафіку, копірайтингу та інших напрямів діяльності, які приносять основний чи додатковий дохід за віддаленої співпраці? Про це та багато іншого ви можете дізнатися прямо зараз на сторінках мого блогу.
Попереду опублікую ще чимало реально корисної інформації. Залишайтеся на зв'язку. За бажанням, можете підписатися на оновлення Workip на e-mail. Форма підписки розташована нижче.
Влад Мержевич
За рахунок того, що вміст осередків таблиці можна одночасно вирівнювати по горизонталі і вертикалі, розширюються можливості управління положенням елементів відносно один одного. Таблиці дозволяють задавати вирівнювання зображень, тексту, полів форми та інших елементів щодо один одного та веб-сторінки загалом. Взагалі, вирівнювання в основному необхідне для встановлення зорового зв'язку між різними елементами, і навіть їх групування.
Центрування по вертикалі
Одним із способів показати відвідувачу спрямованість та назва сайту є використання сплеш-сторінки. Це перша сторінка, на якій, як правило, розташована flash-заставка або малюнок, що виражає головну ідею сайту. Зображення також є посиланням на інші розділи сайту. Потрібно помістити цей малюнок по центру вікна браузера незалежно від роздільної здатності монітора. Для цієї мети можна скористатися таблицею з шириною та висотою, що дорівнює 100% (приклад 1).
Приклад 1. Центрування малюнка
Вирівнювання
У цьому прикладі вирівнювання по горизонталі встановлюється за допомогою параметра align="center" тега
, а по вертикалі вміст осередку можна не центрувати, оскільки це положення за замовчуванням.
Щоб висота таблиці встановлювалася як 100%, необхідно забрати, код при цьому перестає бути валідним
Використання ширини та висоти на всю доступну область веб-сторінки гарантує, що вміст таблиці вирівнюватиметься строго по центру вікна браузера, незалежно від його розмірів.
Вирівнювання по горизонталі
За рахунок поєднання атрибутів align (горизонтальне вирівнювання) та valign ( вертикальне вирівнювання) тега
, допустимо встановлювати кілька видів положень елементів щодо один одного. На рис. 1 показані способи вирівнювання елементів горизонталі.
Розглянемо деякі приклади вирівнювання тексту згідно з наведеним малюнком.
Вирівнювання по верхньому краю
Для вказівки вирівнювання вмісту осередків по верхньому краю, для тега
потрібно встановити атрибут valign зі значенням top (Приклад 2).
Приклад 2. Використання valign
Вирівнювання
Колонка 1
Колонка 2
У цьому прикладі характеристики осередків керуються за допомогою параметрів тега
, але також зручніше змінювати через стилі. Зокрема, вирівнювання в осередках вказується властивостями vertical-align та text-align (приклад 3).
Приклад 3. Застосування стилів для вирівнювання
Вирівнювання
Колонка 1
Колонка 2
Для скорочення коду в даному прикладі використовується групування селекторів, оскільки властивості vertical-align та padding застосовуються одночасно до двох осередків.
Вирівнювання нижнього краю робиться аналогічно, тільки замість значення top використовується bottom .
Вирівнювання по центру
За умовчанням вміст осередку вирівнюється по центру їхньої вертикалі, тому у випадку різної висотиколонок потрібно задавати вирівнювання верхнього краю. Іноді потрібно залишити вихідний спосіб вирівнювання, наприклад, при розміщенні формул, як показано на рис. 2.
У такому випадку формула розташовується по центру вікна браузера, а її номер - по правому краю. Для такого розміщення елементів знадобиться таблиця з трьома осередками. Крайні осередки повинні мати однакові розміри, у середньому осередку вирівнювання робиться по центру, а правій — правому краю (приклад 4). Така кількість осередків потрібна для того, щоб забезпечити позиціонування формули по центру.
Приклад 4. Вирівнювання формули
Вирівнювання
(18.6)
У цьому прикладі перша комірка таблиці залишена порожньою, вона служить лише створення відступу, який, до речі, може бути встановлений і з допомогою стилів.
Вирівнювання елементів форми
За допомогою таблиць зручно визначати положення полів форми, особливо коли вони перемежуються з текстом. Один із варіантів оформлення форми, яка призначена для введення коментаря, показано на рис. 3.
Щоб текст біля полів форми був вирівняний з правого краю, а самі елементи форми - по лівому, знадобиться таблиця з невидимою межею та двома колонками. У лівій колонці буде розміщуватися власне текст, а правої текстові поля (приклад 5).
Приклад 5. Вирівнювання полів форми
Вирівнювання
У цьому прикладі, для тих осередків, де потрібно задати вирівнювання по правому краю, доданий атрибут align="right" . Щоб напис «Коментар» розташовувався по верхній межі багаторядкового тексту, для відповідного осередку встановлюється вирівнювання по верхньому краю за допомогою атрибута valign .
Завантаження...
Top
Існує два основних типи побудови структури сайту:
- Таблична;
- Блокова.
Таблична верстка була домінуючою ще на зорі зародження інтернету. До її переваг можна зарахувати точність заданого позиціонування. Але, тим не менш, вона має явні недоліки. Головними з них є об'ємність коду та низька швидкість завантаження.
Під час використання табличної верстки веб-сторінка не відображатиметься аж до повного завантаження. У той час, як при використанні блоків div елементи відображаються відразу.
Крім високої швидкості завантаження блокова побудова сайту дозволяє в кілька разів зменшити обсяг коду html. У тому числі й за рахунок використання класів CSS.
Проте табличну верстку слід використовувати для структуризації відображення даних на сторінці. Класичним прикладом застосування є відображення таблиць.
Блокова побудова на основі тегів
Засоби позиціонування
У блоковій верстці позиціонування шарів краще здійснювати за допомогою каскадних таблиць стилів. Основною властивістю CSS, що відповідає за розташування
Синтаксис властивості:
float: left | right | none | inherit,
Де:
- left – вирівнювання елемента лівим краєм екрана. Обтікання іншими елементами відбувається праворуч;
- right – вирівнювання праворуч, обтікання іншими елементами – ліворуч;
- none - обтікання не допускається;
- inherit – наслідування значення батьківського елемента.
Розглянемо полегшений приклад позиціонування блоків div за допомогою цієї властивості:
Лівий блок
Правий блок
Тепер постараємося за допомогою цієї властивості розташувати третій div по центру сторінки. Але, на жаль, у float немає значення . А при заданні новому блоку значення вирівнювання праворуч або ліворуч він зсувається у вказану сторону. Тому залишається лише всім трьом блокам поставити float: left :
Але і це не є оптимальним варіантом. При зменшенні вікна всі шари вишиковуються в один ряд по вертикалі, а при збільшенні розмірів – прилипають до лівого краю вікна. Тому потрібен досконаліший спосіб вирівнювання div по центру.
Центрування шарів
У наступному прикладі ми використовуватимемо шар-контейнер, в якому розмістимо інші елементи. Це вирішує проблему усунення блоків один щодо одного при зміні розмірів вікна. Центрування контейнера посередині здійснюється за допомогою завдання властивостей margin нульового значення відступів від верхнього краю та auto з боків (margin: 0 auto ):
Лівий блок
Центральний блок
Правий блок
Цей приклад показує, як можна відцентрувати div по горизонталі. А якщо трохи відредагувати наведений вище код, то можна досягти вертикального вирівнювання блоків. Для цього потрібно лише змінити довжину шару-контейнера (зменшити його). Тобто після редагування його css клас має виглядати так:
Після зміни всі блоки вишикуються строго в ряд посередині. І їхнє положення не зміниться за будь-яких розмірів вікна браузера. Ось як виглядає таке центрування div центром по вертикалі:
У наступному прикладі для центрування шарів усередині контейнера ми використали низку нових властивостей css :
Короткий опис властивостей css та їх значень, які ми використовували в даному прикладі для центрування div всередині div :
- display: inline-block – вирівнює блоковий елемент у рядок та забезпечує його обтікання іншим елементом;
- vertical-align: middle – вирівнює елемент посередині щодо батьківського;
- margin-left – встановлює відступ зліва.
Як з шару зробити посилання
Хоч як дивно звучить, але таке можливо. Іноді div блок як посилання може знадобитися у верстці різних видівменю. Розглянемо практичний прикладреалізації шару-посилання:
У цьому прикладі за допомогою рядка display: block ми задали посилання значення блокового елемента. Щоб вся висота блоку div стала посиланням, встановили height : 100%.
Приховування та відображення блокових елементів
Блокові елементи надають більше можливостей розширення функціоналу інтерфейсу, ніж застаріла таблична верстка. Часто буває, що дизайн сайту є унікальним та впізнаваним. Але за такий ексклюзив доводиться платити за браком вільного місця.
Особливо це стосується головної сторінкивартість розміщення реклами на якій є найвищою. Тому і виникає проблема, куди б «впхнути» ще один рекламний банер. І тут вже вирівнюванням div по центру сторінки ніяк не відбудешся!
Більше раціональним рішеннямє зробити який-небудь блок, що ховається. Ось простий приклад такої реалізації:
Це чарівна кнопка. Натискання на неї приховає або відобразить блок, що приховується.
У цьому прикладі розташування div блоків не змінюється. Тут використовується найпростіша функція JavaScript, що змінює значення властивості css display після натискання на кнопку ( подія onclick).
Синтаксис display:
display: block | inline | inline-block | inline-table | List-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Як бачите, ця властивість може набувати безліч значень. Тому дуже корисним і може використовуватися для позиціонування елементів. В одному з попередніх прикладів за допомогою одного з його значень ( inline-block) ми реалізували вирівнювання div всередині div центром.
Для приховування та показу шару ми використовували два значення властивості display.
У CSS деякі на перший погляд прості речі виявляється не так просто виконати. Однією з таких речей є вирівнювання, тобто. коли один елемент необхідно розташувати певним чином відносного іншого.
У цій статті представлені деякі готові рішення, які допоможуть спростити роботу з центрування елементів по горизонталі та/або по вертикалі.
Примітка: під кожним рішенням наведено список браузерів із зазначенням версій, у яких зазначений CSS-код працює.
CSS - Вирівнювання блоку по центру
1. Вирівнювання одного блоку по центру іншого. При цьому перший та другий блок мають динамічні розміри.
Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%) -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) ;)
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Вирівнювання одного блоку по центру іншого. При цьому другий блок має фіксовані розміри.
Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; /* ширина і висота 2 блоки */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px;
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Вирівнювання одного блоку по центру іншого. У цьому другий блок має розміри, задані у відсотках.
Parent ( position: relative; ) .child ( position: absolute; /* ширина і висота 2 блоки в % */ height: 50%; width: 50%; /* Значення визначаються залежно від його розміру в % */ left: 25%;/* (100% - width) / 2 */ top: 25%;
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
CSS - Вирівнювання по горизонталі
1. Вирівнювання одного блокового елемента (display: block) щодо іншого (в якому він розташований) по горизонталі:
Block ( margin-left: auto; margin-right: auto; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Вирівнювання рядкового (display: inline) або рядково-блочного (display: inline-block) елемента по горизонталі:
Parent ( text-align: center; ) .child ( display: inline-block; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
CSS - Вирівнювання по вертикалі
1. Відцентрувати один елемент (display: inline, display: inline-block) щодо іншого (в якому він розташований) по центру. Батьківський блок у цьому прикладі має фіксовану висоту, яка задається за допомогою властивості CSS line-height.
Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрування одного блоку щодо іншого по вертикалі у вигляді батьки як таблиці, а дитини як осередки цієї таблиці.
Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )
Браузери, які підтримують це рішення:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Якщо Ви знаєте якісь інші цікаві хитрощі або корисні рішення з вирівнювання, то поділіться ними в коментарях.
Доброго дня! Продовжуємо освоювати основи мови HTML. Подивимося, що потрібно писати, щоб вирівняти текст по центру, ширині або краям.
Переходячи до справи, розглянемо, як у HTML зробити текст центром трьома. різними способами. Останні два пов'язані безпосередньо з таблицею стилів. Вона може являти собою файл CSS, який підключається до сторінок сайту та задає їхній вигляд.
Спосіб 1 - пряма робота з HTML
Насправді, все досить просто. Дивіться приклад нижче.
Вирівнювання абзацу по центру.
Якщо потрібно зрушити текстові фрагменти іншим чином, замість параметра «center» прописуємо наступні значення:
- justify – вирівнювання тексту за шириною сторінки;
- right - по правому краю;
- left – по лівому.
За аналогією можна зрушити контент, що знаходиться в заголовках (h1, h2), контейнері (div).
Спосіб 2 та 3 - використання стилів
Конструкцію, представлену вище, можна злегка трансформувати. Ефект буде таким самим. Для цього потрібно прописати поданий нижче код.
Текстовий блок.
У такому вигляді код прописується безпосередньо HTML для вирівнювання текстового контенту по центру.
Є ще альтернативний варіантдосягти результату. Потрібно буде зробити кілька дій.
Крок 1. В основному написати
Текстовий матеріал.
Крок 2. У файлі CSS, що підключається, вписати наступний код:
Rovno (text-align:center;)
Зазначу, що слово «rovno» це лише назва класу, який можна назвати і по-іншому. Це залишається на розсуд програміста.
За аналогією HTML можна запросто зробити текст по центру, ширині, а також вирівняти по правому або лівому краю сторінки. Як бачите, є далеко не один варіант досягти мети.
Усього кілька запитань:
- Робите інформаційний некомерційний проект?
- Бажаєте, щоб сайт добре просувався в пошукових системах?
- Бажаєте отримувати дохід у мережі?
Якщо всі відповіді позитивні, то просто подивіться на комплексний підхід до розвитку сайту. Інформація виявиться особливо корисною, якщо вона працює на CMS WordPress.
Хотілося б відзначити, що власні сайти - це лише один з безлічі варіантів сформувати пасивний або активний дохід на просторах інтернету. Мій блог якраз присвячений фінансовим можливостямв мережі.
Чи працювали колись у сфері арбітражу трафіку, копірайтингу та інших напрямів діяльності, які приносять основний чи додатковий дохід за віддаленої співпраці? Про це та багато іншого ви можете дізнатися прямо зараз на сторінках мого блогу.
Попереду опублікую ще чимало реально корисної інформації. Залишайтеся на зв'язку. За бажанням, можете підписатися на оновлення Workip на e-mail. Форма підписки розташована нижче.
Влад Мержевич
За рахунок того, що вміст осередків таблиці можна одночасно вирівнювати по горизонталі і вертикалі, розширюються можливості управління положенням елементів відносно один одного. Таблиці дозволяють задавати вирівнювання зображень, тексту, полів форми та інших елементів щодо один одного та веб-сторінки загалом. Взагалі, вирівнювання в основному необхідне для встановлення зорового зв'язку між різними елементами, і навіть їх групування.
Центрування по вертикалі
Одним із способів показати відвідувачу спрямованість та назва сайту є використання сплеш-сторінки. Це перша сторінка, на якій, як правило, розташована flash-заставка або малюнок, що виражає головну ідею сайту. Зображення також є посиланням на інші розділи сайту. Потрібно помістити цей малюнок по центру вікна браузера незалежно від роздільної здатності монітора. Для цієї мети можна скористатися таблицею з шириною та висотою, що дорівнює 100% (приклад 1).
Приклад 1. Центрування малюнка
|
|
У цьому прикладі вирівнювання по горизонталі встановлюється за допомогою параметра align="center" тега
Щоб висота таблиці встановлювалася як 100%, необхідно забрати, код при цьому перестає бути валідним
Використання ширини та висоти на всю доступну область веб-сторінки гарантує, що вміст таблиці вирівнюватиметься строго по центру вікна браузера, незалежно від його розмірів.
Вирівнювання по горизонталі
За рахунок поєднання атрибутів align (горизонтальне вирівнювання) та valign ( вертикальне вирівнювання) тега
Розглянемо деякі приклади вирівнювання тексту згідно з наведеним малюнком.
Вирівнювання по верхньому краю
Для вказівки вирівнювання вмісту осередків по верхньому краю, для тега
Приклад 2. Використання valign
| Колонка 1 | Колонка 2 |
У цьому прикладі характеристики осередків керуються за допомогою параметрів тега
Приклад 3. Застосування стилів для вирівнювання
| Колонка 1 | Колонка 2 |
Для скорочення коду в даному прикладі використовується групування селекторів, оскільки властивості vertical-align та padding застосовуються одночасно до двох осередків.
Вирівнювання нижнього краю робиться аналогічно, тільки замість значення top використовується bottom .
Вирівнювання по центру
За умовчанням вміст осередку вирівнюється по центру їхньої вертикалі, тому у випадку різної висотиколонок потрібно задавати вирівнювання верхнього краю. Іноді потрібно залишити вихідний спосіб вирівнювання, наприклад, при розміщенні формул, як показано на рис. 2.
У такому випадку формула розташовується по центру вікна браузера, а її номер - по правому краю. Для такого розміщення елементів знадобиться таблиця з трьома осередками. Крайні осередки повинні мати однакові розміри, у середньому осередку вирівнювання робиться по центру, а правій — правому краю (приклад 4). Така кількість осередків потрібна для того, щоб забезпечити позиціонування формули по центру.
Приклад 4. Вирівнювання формули
|
(18.6) |
У цьому прикладі перша комірка таблиці залишена порожньою, вона служить лише створення відступу, який, до речі, може бути встановлений і з допомогою стилів.
Вирівнювання елементів форми
За допомогою таблиць зручно визначати положення полів форми, особливо коли вони перемежуються з текстом. Один із варіантів оформлення форми, яка призначена для введення коментаря, показано на рис. 3.
Щоб текст біля полів форми був вирівняний з правого краю, а самі елементи форми - по лівому, знадобиться таблиця з невидимою межею та двома колонками. У лівій колонці буде розміщуватися власне текст, а правої текстові поля (приклад 5).
Приклад 5. Вирівнювання полів форми
У цьому прикладі, для тих осередків, де потрібно задати вирівнювання по правому краю, доданий атрибут align="right" . Щоб напис «Коментар» розташовувався по верхній межі багаторядкового тексту, для відповідного осередку встановлюється вирівнювання по верхньому краю за допомогою атрибута valign .
Завантаження...