Что такое vertical-align и когда оно применяется?

Question

Accepted Answer

## Базовая идея

`vertical-align` выравнивает элемент **в строке** (inline / inline-block / table-cell) относительно baseline/родительской строки — **не** центрирует блоки в flex/grid.

## Где работает

- картинки и иконки рядом с текстом (`middle`, `text-bottom`);
- ячейки таблицы / `display: table-cell`;
- inline-block в текстовой строке.

```css
.icon { vertical-align: middle; }
td { vertical-align: top; }
```

Не работает как ожидается для `display: block` в нормальном потоке. Для центрирования карточки в контейнере — flex/grid (`align-items`), не `vertical-align`.

## Итог

Свойство строкового/табличного контекста. Классическая путаница junior-собесов: пытаются им центрировать div.