text-align выравнивает текст по горизонтали внутри блока: left, right, center или justify (по ширине). text-decoration добавляет линию к тексту: underline (подчёркивание), line-through (зачёркивание), overline (линия сверху) или none, чтобы убрать линию совсем.
В этом уроке
Попробуй прямо сейчас: смени text-align: center на right или justify у первого абзаца, а у второго и третьего - поменяй местами underline и line-through, или поставь оба сразу через пробел: underline line-through.
text-align - выравнивание по горизонтали
text-align управляет тем, как текст располагается внутри своего блока по горизонтали: left (по левому краю, значение по умолчанию), right (по правому), center (по центру) и justify (растянуть по всей ширине, выровняв оба края сразу).
text-align: center; - текст ровно посередине блока.
text-align: justify; в узкой колонке с короткими строками - между немногочисленными словами появляются неровные и заметно большие пробелы, потому что каждая строка растягивается ровно до края блока.
text-decoration - подчёркивание и зачёркивание
text-decoration добавляет линию к тексту: underline - подчёркивание (именно так по умолчанию выглядят ссылки), line-through - зачёркивание, overline - линия сверху, а none убирает любую линию, включая подчёркивание ссылок по умолчанию.
text-decoration: line-through; - зачёркнутый текст, например для цены со скидкой.
a { text-decoration: none; } без замены на другой явный признак - ссылка перестаёт быть заметной без наведения мышью, что усложняет её поиск на странице.
Что на самом деле центрирует text-align: center
text-align: center центрирует только инлайновое (строчное) содержимое - сам текст, изображения, ссылки. Если внутри блока лежит другой блочный элемент (например div со своей фиксированной шириной), text-align: center его не тронет - он останется на прежнем месте, ведь центрируется не он сам, а содержимое внутри него.
margin: 0 auto; у блочного элемента с заданной шириной - вот так центрируют сам блок, а не text-align.
text-align: center; у родителя, в надежде центрировать вложенный блочный <div> с фиксированной шириной - сработает для текста внутри этого div, но не переместит сам div к центру.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| text-align: center на родителе, чтобы центрировать сам блочный дочерний элемент | Центрируется только текст и строчное содержимое - сам блочный элемент остаётся на прежнем месте | Для блока с заданной шириной центрировать через margin: 0 auto |
| text-align: justify в узкой колонке с малым числом слов на строке | Между словами появляются неровные, заметно большие пробелы - каждая строка растягивается ровно до края колонки | Использовать justify только в достаточно широких колонках с длинными строками, либо не использовать вовсе |
| Убрали text-decoration: none у ссылок ради дизайна, не добавив другого явного признака | Ссылку перестаёт быть видно среди обычного текста без наведения мышью - проблема для тех, кто хуже различает цвета | Если убираешь подчёркивание, добавь другой явный признак ссылки - например, другой цвет или полужирность |
| Используют text-decoration: blink, ожидая реального мигания текста | Значение принимается браузером как валидный CSS, но ни один современный браузер не реализует сам эффект мигания | Для привлечения внимания использовать CSS-анимацию, а не blink |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| По центру | text-align: center; |
| По правому краю | text-align: right; |
| По ширине (растянуть) | text-align: justify; - осторожно с узкими колонками |
| Подчеркнуть | text-decoration: underline; (у ссылок так уже по умолчанию) |
| Зачеркнуть / убрать линию | text-decoration: line-through; / text-decoration: none; |
Коротко: отвечаем на вопросы
Почему text-align: center не центрирует сам блок (div), а только текст внутри него?
Потому что text-align управляет только выравниванием инлайнового (строчного) содержимого - текста, изображений, ссылок - а не положением самого блочного элемента. Чтобы центрировать блок с заданной шириной, нужен margin: 0 auto.
Как сделать зачёркнутый текст в CSS?
Свойством text-decoration: line-through; - оно проводит линию прямо через середину текста, например для отображения старой цены со скидкой.
Можно ли убирать подчёркивание у ссылок ради дизайна?
Технически да, свойством text-decoration: none, но тогда стоит добавить другой явный признак ссылки - например, отличающийся цвет или полужирность - иначе ссылку станет сложнее заметить среди обычного текста.
