.label { display: flex; align-items: center; }Значок и текст имеют общую визуальную линию.
УРОК 54 ИЗ 100
Выровняйте элементы по поперечной оси
Выровняйте значок и текст метки по вертикали.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
Во flex-контейнере с направлением row поперечная ось вертикальна. align-items: center выравнивает элементы так, чтобы их центры совпали на этой оси.
.label { display: flex; align-items: flex-start; }flex-start выравнивает начальные края, а не центры элементов разной высоты.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Включите Flexbox и выровняйте элементы по центру поперечной оси.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Метка использует Flexbox.
- ○Элементы центрированы по поперечной оси.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
align-items управляет общим выравниванием всех flex-элементов по поперечной оси.