Вирівнювання за допомогою HTML
Існує чотири основних способи розташувати текст і елементи на веб-сторінці:
- left — текст буде розташований по лівому краю;
- right — відповідає за вирівнювання по правому краю;
- center — текст або елементи будуть відображатися по центру;
- justify — вирівнювання в HTML по краях, по всій ширині сторінки з однаковими відступами по обох краях.
За замовчуванням, якщо ніякі елементи форматування не задіяні, інформаційний блок буде розташовуватися з вирівнюванням по лівій стороні, тоді праворуч довжина рядків буде відрізнятися.
Нижче буде розглянуто приклад коду, в якому будуть відображені приклади основних способів форматування для вирівнювання по ширині в HTML.
За розміщення тексту відповідає атрибут align, який працює з такими тегами <div>, <p>, <h1> і іншими.
Синтаксис буде виглядати наступним чином:
<body>
<h1 align=”center”>заголовок Першого в прикладі вирівнюється по центру</h1>
<h2 align=”right”>Вирівнювання підзаголовку по правому краю</h2>
<p align=”justify”>Для довгого елемента тексту, який складається з декількох речень, підійде варіант з вирівнюванням по ширині.
Це покращує читаність тексту. </p>
<h2 align=”left”>Наступний підзаголовок розташований зліва</h2>
</body>
Скопіюйте приведений вище приклад в блокнот і збережіть у вигляді HTML-файлу. Відкривши його в будь-якому браузері, ви на практичному прикладі зрозумієте, як працює вирівнювання.
Його можна застосовувати не тільки до тексту, але і до зображень, тоді код буде виглядати так:
<img src=”kartinka.jpg” align=”center”>
У цьому прикладі виконано вирівнювання по центру в HTML. Спробуйте поекспериментувати і перенести картинку вправо або вліво з використанням відповідних значень атрибута align.
