12.Выравнивание текста на CSS

Сейчас мы с вами научимся выравнивать текст. Для этого используется свойство text-align. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по правому, и по левому краю (значение justify).

Давайте посмотрим на примерах.

Значение right

Выровняем текст в абзацах по правому краю:

<p>
абзац с текстом
</p>p {
text-align: right;
}

Значение center

А теперь выровняем по центру:

<p>
абзац с текстом
</p>p {
text-align: center;
}

Значение left

А вот значение left для абзацев можно и не ставить - они по умолчанию и так выровнены по левому краю. Однако есть элементы, которые по умолчанию стоят по центру (это, например, теги th, которые делают ячейку-заголовок таблицы). И вот для них как раз-таки и может потребоваться выравнивание по левой стороне.

Сделаем это:

    <table border="1">
    <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Зарплата</th>
    </tr>
    <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>200$</td>
    </tr>
    <tr>
    <td>Николай</td>
    <td>Петров</td>
    <td>300$</td>
    </tr>
    </table>th {
    text-align: left;
    }
    table {
    width: 400px;
    }

Результат выполнения кода:

th { text-align: left; } table { width: 400px; }

Значение justify

Ну, и наконец выровняем текст одновременно и по правому, и по левому краю. Этот эффект можно увидеть только при наличии достаточно длинного текста:

    <p>
    длинный текст...
    </p>p {
    text-align: justify;
    width: 300px;
    }

Источник: