Пошук уроків, статей та іншого контенту
Вирівнюйте текст по горизонталі та керуйте його розташуванням у блоці за допомогою text-align.
text-alignВластивість CSS text-align визначає горизонтальне вирівнювання тексту та інших рядкових елементів усередині блоку.
селектор {
text-align: значення;
}Найпоширеніші значення:
left — вирівнювання по лівому краю;
right — вирівнювання по правому краю;
center — вирівнювання по центру;
justify — вирівнювання по ширині.
Значення left розташовує текст біля лівого краю блока.
<p class="left-text">Цей текст вирівняний по лівому краю.</p>.left-text {
text-align: left;
}У мовах із напрямком письма зліва направо, зокрема в українській, це зазвичай стандартне вирівнювання.
Значення right розташовує текст біля правого краю блока.
<p class="right-text">Цей текст вирівняний по правому краю.</p>.right-text {
text-align: right;
}Таке вирівнювання можна використовувати, наприклад, для дат, підписів або числових значень.
Значення center розташовує текст посередині блока.
<h1 class="title">Заголовок сторінки</h1>
<p class="subtitle">Короткий опис сторінки</p>.title,
.subtitle {
text-align: center;
}text-align: center вирівнює вміст усередині блока. Воно не змінює ширину самого блока.
Значення justify вирівнює текст одночасно по лівому та правому краях. Для цього браузер змінює відстань між словами.
<p class="article">
CSS допомагає визначати зовнішній вигляд вебсторінки. За допомогою
властивостей CSS можна змінювати кольори, розміри, відступи та
розташування елементів.
</p>.article {
text-align: justify;
}Вирівнювання по ширині найчастіше використовують для довгих абзаців. Для коротких рядків воно може виглядати неприродно через великі проміжки між словами.
У наступному прикладі кожен абзац має інше горизонтальне вирівнювання.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Вирівнювання тексту</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 700px;
margin: 0 auto;
padding: 24px;
}
h1 {
text-align: center;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
p {
padding: 12px;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<h1>Вирівнювання тексту</h1>
<p class="left">Цей текст вирівняний по лівому краю.</p>
<p class="center">Цей текст вирівняний по центру.</p>
<p class="right">Цей текст вирівняний по правому краю.</p>
<p class="justify">
Цей текст вирівняний по ширині. Браузер змінює відстань між словами,
щоб рядки доходили одночасно до лівого та правого країв блока.
</p>
</body>
</html>text-align працює з блокамиВластивість text-align вирівнює текст або інші рядкові елементи всередині блока.
<div class="container">
<span>Текст усередині блока</span>
</div>.container {
text-align: center;
}У цьому прикладі span буде розташований по центру блока .container.
Водночас text-align не призначена для переміщення самого блока:
<div class="box">Блок</div>.box {
width: 200px;
text-align: center;
}Тут по центру вирівнюється слово Блок, але сам блок не переміщується по центру сторінки.
text-align успадковується дочірніми елементами. Якщо задати вирівнювання батьківському елементу, його дочірній текст зазвичай успадкує це значення.
<section class="content">
<h2>Заголовок</h2>
<p>Текст абзацу також буде вирівняний по центру.</p>
</section>.content {
text-align: center;
}Окремому дочірньому елементу можна призначити інше вирівнювання:
.content p {
text-align: left;
}У результаті заголовок залишиться по центру, а абзац буде вирівняний по лівому краю.
text-align.card {
width: 300px;
text-align: center;
}Цей код центрує текст у .card, але не саму картку. text-align відповідає за вміст блока.
text-align працює по горизонталі. Воно не розташовує текст посередині блока по вертикалі.
.box {
text-align: center;
}Цей код центрує текст лише зліва направо, а не зверху вниз.
justify для короткого текстуУ коротких абзацах justify може створювати надто великі проміжки між словами. Для заголовків, кнопок і коротких повідомлень зазвичай доречніші left, center або right.
Якщо потрібно вирівняти текст у кількох елементах, властивість можна застосувати до їхнього спільного батьківського блока:
.header {
text-align: center;
}Якщо ж вирівнювання має відрізнятися, задайте text-align окремим елементам.
text-align задає горизонтальне вирівнювання вмісту блока.
left вирівнює текст по лівому краю.
right вирівнює текст по правому краю.
center вирівнює текст по центру.
justify вирівнює текст по ширині блока.
Властивість успадковується дочірніми елементами.
text-align вирівнює текст, але не переміщує сам блок і не відповідає за вертикальне вирівнювання.