Выравнивание текста CSS и направление текста

Выравнивание текста и направление текста

В этой главе вы узнаете о следующих свойствах:

text-align
text-align-last
direction
unicode-bidi
vertical-align

Выравнивание текста

Свойство text-align используется для установки горизонтального выравнивания текста.

Текст может быть выровнен по левому или правому краю, по центру или по ширине.

В следующем примере показан текст, выровненный по центру, а также по левому и правому краю. (выравнивание по левому краю используется по умолчанию, если направление текста слева направо и вправо). выравнивание используется по умолчанию, если направление текста справа налево):

Пример

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

Если для свойства text-align установлено значение "justify", каждая строка растянута так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были совмещены. прямо (как в журналах и газетах):

Пример

div {
  text-align: justify;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>Example text-align: justify</h1>

<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

</body>
</html>

Выравнивание текста в последнюю очередь

Свойство text-align-last указывает, как выравнивать последнюю строку текста.

Пример

Выровняйте последнюю строку текста в трех элементах <p>:

 p.a
{
   
text-align-last: right;
}
p.b
{
   
text-align-last: center;
}
p.c
{
    text-align-last: justify;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}
</style>
</head>
<body>

<h1>The text-align-last Property</h1>

<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>
</html>

Направление текста

направление и Свойства unicode-bidi можно использовать для изменения направления текста элемента:

Пример

 p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>
</html>

Вертикальное выравнивание

Свойство vertical-align задает вертикальное выравнивание элемента.

Пример

Установите вертикальное выравнивание изображения в тексте:

 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;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
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>

<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p> 

<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p> 

<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>

<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p> 

<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>

</body>
</html>

Свойства выравнивания/направления текста CSS

direction: Определяет направление текста/направление письма
text-align: Задает горизонтальное выравнивание текста
text-align-last: Указывает, как выровнять последнюю строку текста.
unicode-bidi: Используется вместе со свойством направления, чтобы установить или указать, следует ли переопределить текст для поддержки нескольких языков в одном документе.
vertical-align: Устанавливает вертикальное выравнивание элемента

Выравнивание текста CSS и направление текста

Оглавление

Выравнивание текста и направление текста