Сильный способ выделить участок текста — выровнять его иначе, чем остальной текст. На многих сайтах используют выравнивание заголовка по центру, чтобы пользователь быстрее мог его отличить.
Заголовок, расположенный по центру
Текст страницы. Можно заметить, что заголовок бросился в глаза, благодаря выравниванию по центру
CSS позволяет выровнять текст, используя свойство text-align
с 4 основными значениями:
left
— по левому краю. Используется по умолчаниюcenter
— по центруright
— по правому краюjustify
— по ширине<p class="left">Текст по левому краю</p>
<p class="center">Текст по центру</p>
<p class="right">Текст по правому краю</p>
<p class="justify">Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами</p>
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
Текст по левому краю
Текст по центру
Текст по правому краю
Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами. Такой приём часто используется в книжной вёрстке, так как не создаются «рваные края» в тексте
Добавьте в редактор параграф с классом important
и выровняйте его по центру. Стили укажите в теге <style>
Для глаза самый привычный вариант — выравнивание по левому краю. Не используйте большое количество разных выравниваний на странице
Команда проекта находится в телеграм-сообществе по ссылке https://ttttt.me/HexletLearningBot. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "Обсуждение". Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт
Ваше упражнение проверяется по этим тестам
1const { test } = require('tests');
2
3test(({ query, expect }) => {
4 const element = query(document, 'p');
5 expect(element).to.have.class('important');
6
7 const style = getComputedStyle(element);
8 expect(style).to.have.property('text-align', 'center');
9});
10
Решение учителя откроется через: