Вертикальное выравнивание текста (vertical-align): Тренажер CSS

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

Эта серия заданий посвящена свойству CSS `vertical-align`. Вы попрактикуетесь в выравнивании inline, inline-block элементов и содержимого ячеек таблицы относительно друг друга или строки, в которой они находятся. Задания построены от простого к сложному и помогут закрепить понимание различных значений свойства `vertical-align`, таких как `baseline`, `middle`, `top`, `bottom`, `text-top`, `text-bottom`, `sub`, `super` и его применение в разных контекстах. Вам нужно будет заполнить пропущенные части CSS кода, чтобы добиться нужного визуального результата.

Список тем

Выравнивание изображения по нижнему краю текста

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

CSS

.container {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
}

.container img {
  height: 40px;
  vertical-align: input1;
}

                     .container {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
}

.container img {
  height: 40px;
  vertical-align: input1;
}

HTML

<div class="container">
  Текст рядом с 
  <img src="https://naytikurs.ru/img/1.png" alt="icon">
  изображением.
</div>

Используйте свойство `vertical-align`. Для выравнивания по базовой линии (что часто является поведением по умолчанию, но здесь нужно явно указать для практики) или по нижнему краю строки, подумайте о значениях `baseline` или `bottom`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание изображения по центру текста

Теперь выровняйте то же изображение так, чтобы его вертикальный центр совпадал с серединой высоты строчных букв родительского элемента (например, буквы 'x'). Впишите правильное значение свойства `vertical-align`.

CSS

.container {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  line-height: 50px; /* Добавлено для наглядности */
}

.container img {
  height: 40px;
  vertical-align: input1;
}

                     .container {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  line-height: 50px; /* Добавлено для наглядности */
}

.container img {
  height: 40px;
  vertical-align: input1;
}

HTML

<div class="container">
  Текст рядом с 
  <img src="https://naytikurs.ru/img/2.png" alt="icon">
  изображением.
</div>

Для выравнивания по середине строки относительно строчных букв родителя используется значение `middle` свойства `vertical-align`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выравнивание inline-block элементов по верху

У вас есть два элемента `span` с разной высотой, отображаемые как `inline-block`. Ваша задача — выровнять их так, чтобы их верхние границы находились на одном уровне. Заполните пропуск в CSS.

CSS

.block {
  display: inline-block;
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
  vertical-align: input1;
}

.block-1 {
  height: 50px;
  background-color: #e0f7fa;
}

.block-2 {
  height: 80px;
  background-color: #e0f2f7;
}

                     .block {
  display: inline-block;
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
  vertical-align: input1;
}

.block-1 {
  height: 50px;
  background-color: #e0f7fa;
}

.block-2 {
  height: 80px;
  background-color: #e0f2f7;
}

HTML

<div>
  <span class="block block-1">Блок 1</span>
  <span class="block block-2">Блок 2</span>
</div>

Чтобы выровнять inline-block элементы по их верхнему краю внутри строки, используйте значение `top` для свойства `vertical-align`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование text-top и text-bottom

В этом примере нужно выровнять иконки. Первую иконку выровняйте по самому верху текста строки (`text-top`), а вторую — по самому низу текста строки (`text-bottom`). Заполните пропуски `input1` и `input2`.

CSS

.container {
  font-size: 30px;
  border: 1px solid #ccc;
  padding: 10px;
}

.icon {
  height: 1em; /* высота равна размеру шрифта */
}

.icon-top {
  vertical-align: input1;
}

.icon-bottom {
  vertical-align: input2;
}

                     .container {
  font-size: 30px;
  border: 1px solid #ccc;
  padding: 10px;
}

.icon {
  height: 1em; /* высота равна размеру шрифта */
}

.icon-top {
  vertical-align: input1;
}

.icon-bottom {
  vertical-align: input2;
}

HTML

<div class="container">
  <img src="https://naytikurs.ru/img/4.png" alt="icon" class="icon icon-top">
  Текст между иконками 
  <img src="https://naytikurs.ru/img/5.png" alt="icon" class="icon icon-bottom">
</div>

Используйте значения `text-top` и `text-bottom` свойства `vertical-align` для соответствующих иконок.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Создание надстрочного и подстрочного текста

Используя свойство `vertical-align`, сделайте так, чтобы текст внутри первого `span` стал подстрочным (как в H₂O), а текст внутри второго `span` — надстрочным (как в x²).

CSS

.subscript {
  vertical-align: input1;
  font-size: 0.75em; /* Уменьшим размер для наглядности */
}

.superscript {
  vertical-align: input2;
  font-size: 0.75em;
}

                     .subscript {
  vertical-align: input1;
  font-size: 0.75em; /* Уменьшим размер для наглядности */
}

.superscript {
  vertical-align: input2;
  font-size: 0.75em;
}

HTML

<p>
  Формула воды: H<span class="subscript">2</span>O
</p>
<p>
  Квадрат числа: x<span class="superscript">2</span>
</p>

Для создания подстрочного текста используйте значение `sub`, а для надстрочного — `super` у свойства `vertical-align`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вертикальное выравнивание в ячейке таблицы

Свойство `vertical-align` очень полезно для выравнивания содержимого внутри ячеек таблицы (`<td>` или `<th>`). Ваша задача — выровнять текст в ячейке таблицы по вертикальному центру. Заполните пропуск.

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  height: 100px; /* Задаем высоту ячейки */
  vertical-align: input1;
  text-align: center; /* Горизонтальное выравнивание для наглядности */
}

                     table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  height: 100px; /* Задаем высоту ячейки */
  vertical-align: input1;
  text-align: center; /* Горизонтальное выравнивание для наглядности */
}

HTML

<table>
  <tr>
    <td>Этот текст должен быть выровнен по центру ячейки.</td>
  </tr>
</table>

Для ячеек таблицы (`display: table-cell`) свойство `vertical-align` может принимать значения `top`, `middle`, `bottom`. Используйте `middle` для центрирования.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Указание свойства для выравнивания

Иногда нужно вспомнить само имя свойства. В этом задании вам дано значение (`middle`), но пропущено имя CSS свойства, отвечающего за вертикальное выравнивание inline и inline-block элементов. Впишите правильное имя свойства.

CSS

.container {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  line-height: 60px;
}

.container img {
  height: 50px;
  input1: middle;
}

                     .container {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 24px;
  line-height: 60px;
}

.container img {
  height: 50px;
  input1: middle;
}

HTML

<div class="container">
  Текст и 
  <img src="https://naytikurs.ru/img/7.png" alt="icon">
  картинка.
</div>

Свойство, управляющее вертикальным выравниванием inline, inline-block и table-cell элементов, называется `vertical-align`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Применение vertical-align к span

По умолчанию `vertical-align` не оказывает видимого эффекта на чисто строчные элементы (`span`, `a` и т.д.), если они не содержат элементов с другой высотой. Чтобы `vertical-align` работал предсказуемо для позиционирования самого блока `span`, ему нужно задать `display: inline-block`. Ваша задача: задать элементу `span` нужный `display` и выровнять его по верхнему краю строки (`top`).

CSS

.container {
  border: 1px solid #ccc;
  padding: 10px;
  line-height: 50px;
}

.aligned-span {
  background-color: #e3f2fd;
  padding: 5px;
  border: 1px solid #90caf9;
  display: input1;
  vertical-align: input2;
}

                     .container {
  border: 1px solid #ccc;
  padding: 10px;
  line-height: 50px;
}

.aligned-span {
  background-color: #e3f2fd;
  padding: 5px;
  border: 1px solid #90caf9;
  display: input1;
  vertical-align: input2;
}

HTML

<div class="container">
  Строка текста и 
  <span class="aligned-span">выровненный span</span>
  еще текст.
</div>

Установите `display` в `inline-block` и `vertical-align` в `top` для элемента с классом `.aligned-span`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку