Свойство text-align

Задает выравнивание текста

text-align: left;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

text-align: left;

Выравнивание текста по левому краю

<style>
.example-1 {
    text-align: left;
}
</style>

<div class="example-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

text-align: right;

Выравнивание текста по правому краю

<style>
.example-2 {
    text-align: right;
}
</style>

<div class="example-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

text-align: center;

Выравнивание текста по центру

<style>
.example-3 {
    text-align: center;
}
</style>

<div class="example-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

text-align: justify;

Выравнивание текста по левому и правому краям за исключением последней строки

<style>
.example-4 {
    text-align: justify;
}
</style>

<div class="example-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

text-align: start;

Аналогично значению left. Если текст идет слева направо, то текст будет выравниваться по левому краю. Если текст идет справа налево, то текст будет выравниваться по правому краю

<style>
.example-5 {
    text-align: start;
}
</style>

<div class="example-5">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

<div class="example-5" dir="rtl">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

text-align: end;

Аналогично значению right. Если текст идет слева направо, то текст будет выравниваться по правому краю. Если текст идет справа налево, то текст будет выравниваться по левому краю

<style>
.example-6 {
    text-align: end;
}
</style>

<div class="example-6">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

<div class="example-6" dir="rtl">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Atque, minus, officiis, facere, ipsum repellendus optio
    accusamus blanditiis voluptate ipsa nemo asperiores deleniti
    cumque quisquam.</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, minus, officiis, facere, ipsum repellendus optio accusamus blanditiis voluptate ipsa nemo asperiores deleniti cumque quisquam.

Читайте также

Обсуждение (2)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии


Кирилл
Какое св-во, которое изменяет направление текста? (Не совсем понятно с text-align: start и text-align: end)
  • Кирилл
    Понял, direction