Підручник html - вирівнювання вмісту тегів

Як я і обіцяв раніше, в цьому уроці ви дізнаєтеся як можна вирівняти по горизонталі вміст будь-якого HTML-тега на сторінці не використовуючи застарілий атрибут align. Як ви можливо вже здогадалися, ми знову будемо використовувати стилі (CSS), а точніше наш улюблений атрибут style.

Отже, щоб вирівняти вміст HTML-елемента, необхідно атрибуту style привласнити одне з наступних значень:

• text-align: center - вирівнювання кожного рядка по центру елемента, наприклад параграфа.
• text-align: left - Кожен рядок впритул притискається до лівого боку елемента (це значення за замовчуванням).
• text-align: right - Кожен рядок притискається до правого боку.
• text-align: justify - Вирівнювання відразу по лівій і правій сторонах елементу. Поясню. Зазвичай у елемента, наприклад параграфа, одна сторона тексту завжди рівна, а інша - «рвана», так як довжини рядків виходять трохи різними. А коли ми використовуємо значення text-align: justify. то кожен рядок рівномірно розподіляється по ширині. У разі необхідності між словами браузер додає додаткові пробіли, а перше і останнє слово рядка завжди притиснуті до відповідних сторонам, тому виходить рівний по обидва боки блок.

Приклад вирівнювання вмісту тегів

Результат в браузері

Тема по центру.

Текст параграфа притискається вправо.

Параграф по центру.

Взагалі, горизонтальне вирівнювання застосовується лише до блокових тегам і комірок таблиці (про них поговоримо пізніше). Хоча, з іншого боку, навіть якщо ви спробуєте, то не зможете застосувати його до вбудованим (inline). Чому? А пам'ятаєте ми недавно з'ясували, що ширина вбудованого елемента дорівнює його вмісту? Відповідно виходить, що цього самого вмісту просто нікуди буде вирівнюватися і браузер елементарно проігнорує ваші «художества». )