Оформление текста, часть 1 / Вертикальное выравнивание: vertical-align [12/16]
×

Вертикальное выравнивание: vertical-align [12/16]

Выравниванием текста по вертикали можно управлять с помощью свойства vertical-align. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера.

У данного свойства много значений, но самые часто используемые:

  1. top — выравнивание по верхнему краю строки;
  2. middle — по середине;
  3. bottom — по нижнему краю;
  4. baseline — по базовой линии (значение по умолчанию).

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Вертикальное выравнивание: vertical-align</title> </head> <body> <h1>Составляющие адаптивного дизайна</h1> <p>При технической реализации адаптивного дизайна (верстке адаптивного макета), применяются следующие подходы и технологии:</p> <ul> <li>Резиновая верстка <small class="top">fluid layout</small></li> <li>Медиазапросы <small class="middle">media queries</small></li> <li>Резиновые картинки <small class="bottom">fluid images</small></li> </ul> </body> </html>
CSS
h1 { font-size: 36px; } ul { margin: 0; padding: 0; list-style: none; font-size: 28px; } li { margin-bottom: 5px; white-space: nowrap; background: #f5f5f5; } small { font-size: 8px; color: #666; }
HTML Academy

Проверьте, как вертикальное выравнивание влияет на отображение текста.

  1. Тегу с классом top задайте vertical-align: top;.
  2. Тегу с классом middle задайте vertical-align: middle;.
  3. Тегу с классом bottom задайте vertical-align: bottom;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.