Войти
Регистрация

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

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

Здравствуйте, друзья!

В браузере текст всегда выровнен по левому краю по умолчанию, как не удивительно. Однако, с помощью CSS-правил, можно задать другое выравнивание текста с помощью свойства text-lign.

Выравнивание текста в CSS не должно у Вас вызывать затруднений, т.к. это основы CSS и применяется достаточно часто при создании сайтов.

Тексты выравниваются всегда внутри блочных элементов, таких как <div>, <p>, <h1>-<h6> по отношению к их границам.

Как Вы помните из курса по основам HTML, выравнивание можно задавать напрямую в верстке внутри отрывающего тега через атрибут align:

<div align="center">Текст внутри блочного тега div<div>

Происходит выравнивание всего содержимого по центру.

В CSS все почти похоже:

div {
   text-align: center;
}

Здесь задаем тегу <div> выравнивание по центру всего его содержимого. Сам тег останется на месте. Выравнивание блочных элементов мы обсудим в другой статье.

Также доступно выравнивание текста по правому краю (right), по левому (left), а также растягивание текста по ширине, как в газетной колонке статей (justify). С последним текст выглядит красиво, растянут по всей ширине, но если текста мало или блок слишком широкий, текст выглядит не очень, добавляются лишние пробелы между словами. Поэтому с этим свойством аккуратнее.

Думаю в этой статье будет уместно еще такое свойство, как text-indent. Данное свойство задает отступ слева у первой строки текста. Размер отступа задается единицами измерения:

p {
   text-indent: 20px;
}

Получаем результат в виде текста с отступом слева в 20 пикселей:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu...

Вот так происходит выравнивание. Как думаете, легко запомнить?

На этом все, увидимся в следующей статье.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?