Выравнивание текста и направление текста в CSS
В этой главе вы узнаете об этих свойствах: text-align, text-align-last, vertical-align, direction и unicode-bidi.
Выравнивание текста
Свойство text-align задаёт горизонтальное выравнивание текста. Оно может принимать следующие значения:
left— выравнивает текст по левому краю.right— выравнивает текст по правому краю.center— центрирует текст.justify— растягивает каждую строку так, чтобы все строки имели одинаковую ширину.
Для текста слева направо значение по умолчанию — left; для текста справа налево значение по умолчанию — right.
Слева, справа и по центру
Заголовки выровнены по центру, по левому краю и по правому краю.
Prompt
HTML-страница, показывающая выравнивание текста слева, справа и по центру.
Во внутреннем блоке
<style> выровняй <h1> по центру, <h2> — по левому краю, а <h3> — по правому краю с помощью text-align. Добавь заголовок каждого уровня.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Centered heading</h1>
<h2>Left-aligned heading</h2>
<h3>Right-aligned heading</h3>
</body>
</html>
По ширине
При justify каждая строка растягивается так, чтобы левый и правый края совпадали, как в газете.
Prompt
HTML-страница с текстом, выровненным по ширине.
Во внутреннем блоке
<style> задай <div> свойство text-align: justify, чтобы каждая строка растягивалась до одинаковой ширины, как в газете. Помести внутрь div длинный абзац из нескольких предложений.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
text-align: justify;
}
</style>
</head>
<body>
<div>
When the text-align property is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Выравнивание последней строки
Свойство text-align-last задаёт способ выравнивания последней строки текста. Оно может принимать одно из следующих значений: auto (по умолчанию), left, right, center, justify, start и end.
Пример
Последняя строка трёх абзацев выровнена по правому краю, по центру и по ширине.
Prompt
HTML-страница, показывающая свойство text-align-last.
Во внутреннем блоке
<style> создай три класса абзаца: text-align-last right, center и justify. Дай каждому абзацу достаточно текста, чтобы он переносился на несколько строк и было видно выравнивание последней строки.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is aligned right.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is centered.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is justified.</p>
</body>
</html>
Вертикальное выравнивание
Свойство vertical-align задаёт вертикальное выравнивание элемента. Оно может принимать одно из следующих значений: baseline (по умолчанию), длину или проценты, sub, super, top, text-top, middle, bottom и text-bottom.
Пример
Изображение в строке текста показано с несколькими значениями vertical-align.
Prompt
HTML-страница, показывающая свойство vertical-align для изображений внутри строки текста.
Во внутреннем блоке
<style> создай пять классов изображений с vertical-align: baseline, text-top, text-bottom, sub и super. Используй маленькие встроенные изображения (SVG-квадрат в виде data URI), размещённые внутри строки текста, чтобы были видны различия вертикального выравнивания.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 24px;
height: 24px;
}
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<p>An image with a baseline alignment: <img class="a" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a text-top alignment: <img class="b" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a text-bottom alignment: <img class="c" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a sub alignment: <img class="d" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a super alignment: <img class="e" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
</body>
</html>
Направление текста
Свойство direction задаёт направление письма внутри блочного элемента.
Совет: используйте его вместе со свойством unicode-bidi, чтобы поддерживать текст на нескольких языках в одном документе.
Пример
Абзац настроен на направление справа налево.
Prompt
HTML-страница, показывающая направление текста справа налево.
Во внутреннем блоке
<style> задай <p> свойства direction: rtl и unicode-bidi: bidi-override, чтобы текст шёл справа налево. Добавь абзац текста.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This paragraph runs from right to left.</p>
</body>
</html>
Свойства CSS выравнивания/направления текста
Сводка свойств:
direction— задаёт направление письма.text-align— задаёт горизонтальное выравнивание текста.text-align-last— задаёт способ выравнивания последней строки текста.unicode-bidi— используется вместе сdirectionдля поддержки нескольких языков в одном документе.vertical-align— задаёт вертикальное выравнивание элемента.