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

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.

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.

Свойство text-align

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

Значения

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

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