є атрибут align , який відповідає за те, як розмістити контейнер на сторінці. Цей атрибут має значення left, center, right. Давайте напишемо код, де розташуємо елементи в різних частинах браузера:

У цій статті ви навчилися вирівнювати текст на html-сторінці.

Частина вмісту цього розділу може бути непридатною для деяких мов.

Вирівнювання тексту – це атрибут форматування абзаців, що визначає зовнішній вигляд тексту у всьому абзаці. Наприклад, в абзаці, який вирівнюється по лівому краю (найпоширеніше вирівнювання), текст вирівнюється по лівому полю. В абзаці, вирівняному по ширині, текст вирівнюється обома полями.

Вирівняти текст по центру

Вирівнювання тексту за шириною

Розповсюдження тексту

На вкладці Головнав групі абзацвиконайте одну з наведених нижче дій.

Завдання	Команда
Вирівнювання тексту з лівого краю
Вирівнювання тексту по центру	Вирівняти текст по центру

Вирівнювання тексту за шириною

Вирівнювання тексту по лівому краю, по центру або правому краю

Клацніть будь-яке місце абзацу, який потрібно вирівняти.

На вкладці Головнав Абзацвиконайте одну з наведених нижче дій.

Завдання	Команда
Вирівнювання тексту з лівого краю	Вирівнювання тексту з лівого краю
Вирівняти текст по центру	Вирівняти текст по центру
Вирівняти текст з правого краю	Вирівнювання тексту по правому краю

Вирівнювання тексту за шириною

При вирівнюванні тексту по ширині між словами додається простір, щоб обидва краї кожного рядка були вирівняні щодо обох полів. Останній рядок абзацу вирівнюється по лівому краю.

Більшість із нас зі шкільної лави мають чітке уявлення про ідеально оформлену сторінку. Рівномірний розсип букв, стрункі лінії слів, строгий, обрамлений рівними полями прямокутник тексту – саме таку картину ми спостерігаємо, перегортаючи будь-яке друковане видання. Велика спокуса зобразити щось подібне і на web-сторінці, тим більше, що для цього запропоновано всім відомий засіб - вирівнювання тексту по ширині. Однак, що добре для друкаря, то смертний гріх для веб-верстальника. А все тому, що стосовно розмітки сайту ця функція обростає такою кількістю недоліків, що її єдина перевага у вигляді рівного правого краю просто тьмяніє на очах. Ось лише кілька причин, через які варто відмовитися від вирівнювання по ширині на користь вирівнювання по лівому краю.

Видимий безлад усередині текстового блоку

Так-так, чим рівніше краї текстового блоку, тим очевидніший бардак усередині нього. У друкарській справі стрункості тексту дозволяє досягти цілий арсенал інструментів: переноси, регулювання інтервалів між словами та відстаней між літерами і навіть трохи ширші або трохи вужчі варіанти шрифту. А ось макет інтернет-сторінки передбачає, як правило, лише один спосіб розтягнути рядок від краю до краю - неконтрольоване збільшення ширини прогалин. Мало того, що це призводить до появи непривабливих зазорів між словами, так ці зазори, немов за законом підлості, часто припадають приблизно на те саме місце в кожному рядку, утворюючи так звані вертикальні «річки». Все це надає тексту дуже неохайного вигляду.

Нечитабельність

Але якщо естетикою ще можна було б пожертвувати заради акуратних країв, то очевидні проблеми з візуальним сприйняттям тексту - все-таки занадто висока плата за них. А вирівняний по ширині текст об'єктивно набагато менш читабельний, ніж вирівняний по лівому краю. Головна причина криється все в тих же збільшених інтервалах між словами: око постійно змушене шукати початок наступного слова, а через різницю пробілів від рядка до рядка ще й перебудовуватися з однієї відстані на іншу.

Необхідність працювати над довжиною рядка, часто безрезультатно

Задля справедливості варто відзначити, що зазначені недоліки вирівняного тексту можуть бути зменшені за рахунок збільшення довжини рядка. Однак далеко не завжди цей метод буде ефективним. А ось знизити читання він може з дуже великою часткою ймовірності: очам важко, просканувавши до кінця один довгий рядок, точно і швидко перескочити на початок наступного.

Непристосованість під мобільні пристрої

Чим вже стовпчик з текстом, тим меншою мірою він підлягає вирівнюванню по ширині. І тут такий формат вступає у пряму суперечність із вимогами мобільних пристроїв, для яких, навпаки, чим коротший рядок, тим краще. Погодьтеся, одна справа стежити поглядом за довгим рядком на повноекранному моніторі, і зовсім інше - щоразу прокручувати кожен рядок назад і вперед. Сумнівне задоволення, зате вірний спосіб втратити мобільну аудиторію!

Здавалося б, варто додати на сторінку функцію перенесення слів, і всі ці проблеми, що виникають під час вирівнювання тексту по ширині сторінки, було б вирішено. Але в тому-то і проблема, що HTML-розмітка такої функції не передбачає. Ось і виходить, що на сьогоднішній день ніякого іншого способу зберегти допустимі інтервали між словами на веб-сторінці, окрім вирівнювання тексту по краю, не існує.

Таким чином, при створенні інтернет-сторінки важливо пам'ятати головне: web-сайт - це не книга, і підходити до його оформлення потрібно з тих позицій, які диктують технології та психологія сприйняття, а не чиїсь естетичні погляди, втім, дуже і дуже умовні. Повірте, якщо ваш текст буде акуратно розміщений і, в першу чергу, легко та з задоволенням читаємо, ніхто й уваги не зверне на таку дрібницю, як нерівність полів!

До речі, коли ви читали цю статтю, ви звернули увагу, що текст не вирівняний по ширині?

Вітаю! Продовжуємо освоювати основи мови 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. Форма передплати розташована нижче.

Вирівнювання тексту визначає його зовнішній вигляд та орієнтацію країв абзацу і може виконуватися по лівому краю, правому краю, по центру або по ширині. У табл. 1 показано варіанти вирівнювання блоку тексту.

Табл. 1. Способи вирівнювання тексту

Вирівнювання по лівому краю	Вирівнювання по правому краю	Вирівнювання по центру	Вирівнювання по ширині
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Найбільш поширений варіант - вирівнювання по лівому краю, коли зліва текст зсувається до краю, а правий залишається нерівним. Вирівнювання по правому краю та по центру в основному використовується в заголовках та підзаголовках.

Слід пам'ятати, що з використанні вирівнювання по ширині у тексті між словами можуть з'явитися великі інтервали, що дуже красиво.

Для встановлення вирівнювання тексту зазвичай використовується тег абзацу