По какому принципу здесь работает vertical-align?

Question

[Александр]

Вопросы:
1) Я выравниваю - Блок1 с помощью vertical-align: middle, почему тогда текст так и остается вверху.
2) Почему Блок 2 выравнялся посередине, если выравниваем Блок 1 ?

Вот код: https://codepen.io/Cepairda/pen/OZPeyV

Answer 1

[Вадим Белкин]

1. На инлайн блоках vertical-align работает для выравнивания по вертикали самих блоков, а не их контента. Плюс сам Блок 1 у вас на всю высоту растянут, а текст внутри кверху прибит по обычному поведению
2. Блок 2 выровнен по базовой линии, у него не установлен vertical-align, а по-умолчанию он baseline, что в данном случае почти похоже на middle (но различия в этом есть)

Comments

[Александр]

Вопрос. Почему тогда baseline находится по середине первого блока.
Текст не посередине, а базовая линия посередине. Как это понимать ?

[Вадим Белкин]

Почитайте про работу vertical-align
vertical-align задает вертикальное выравнивание текста если речь идет о таблицах, если же это инлайн или инлайн блоки то выравнивание самого элемента. Текст в Блоке 1 у вас внутри выровнен по высоте строки, из-за того что сам Блок 1 у вас на всю высоту (100%) текст внутри него выровнен вверху.

[Александр]

Вадим Белкин, https://codepen.io/Cepairda/pen/OZPeyV
1)Хорошо, если выравнивается элемент, почему он тут не по центру ?
2)Каким образом тогда выравнять текст в Блок 1 ?
3)Почему Базовая линия меняется у Элемента Блок1 и Блок 2 становится в центре практически ?

[Вадим Белкин]

Александр, не поленитесь сами разобраться в работе базовой линии, тут неплохо описано. Или тут
Прочитайте что такое базовая линия и где она проходит. Думаю по визуализации в статьях должно стать понятно почему такое поведение.

[Александр]

Вадим Белкин, правильно ли я понимаю, что по умолчанию базовая линия в обоих блоках идет по текстом. А когда я делаю для первого блока vertical-align: middle, то есть базовая линия становится по центру блока ?

[Вадим Белкин]

Александр, примерно так. vertical-align: middle не ставит базовую линию по центру, она остается там где была, просто блоки выравниваются по центру

цитата из первой ссылки про инлайн блоки

1. Для мно­го­строч­ных ин­лайн-бло­ков ба­зо­вой ли­ни­ей яв­ля­ет­ся ба­зо­вая ли­ния по­след­не­го строч­но­го бок­са в обыч­ном по­токе.
   
2. Если внут­ри ин­лайн-бло­ка нет бок­сов обыч­но­го по­то­ка, или же у ин­лайн-бло­ка сто­ит over­flow от­лич­ный от vis­i­ble, то ба­зо­вой ли­ни­ей ста­но­вит­ся ниж­няя гра­ни­ца блока.
   

заметьте, что для инлайн блоков, инлайн таблиц и флексов базовая линия работает по разному, а так же для элементов с over­flow: auto

[Александр]

Вадим Белкин, Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.

Так вот что интересно.

https://codepen.io/Cepairda/pen/OZPeyV Ровняем первый
https://codepen.io/Cepairda/pen/QrNqoY Ровняем второй

Как видно, все работает логично, как написано выше. Середина элемента равняется по базовой линии
+ половина высоты X.
Но как это работает в этом случае ?

https://codepen.io/Cepairda/pen/JvXrQb

Я вижу только одно обьяснение, сначала первый блок равняется по базовой линии второго. При этом его базовая линия становится по центру,
после чего по ней равняется второй блок.

[Александр]

Вадим Белкин, Что скажете насчет того, что я выше написал ?

[Вадим Белкин]

Александр, https://codepen.io/Cepairda/pen/JvXrQb базовая линия никуда не становится, она не смещается данными стилями. В данном примере получилось так что второй блок выровнился своим центром по базовой линии первого элемента, как вы сказали, но базовая линия второго не сместилась, она по прежнему проходит в том же месте, как если бы был другой vertical-align, конкретно

Для мно­го­строч­ных ин­лайн-бло­ков ба­зо­вой ли­ни­ей яв­ля­ет­ся ба­зо­вая ли­ния по­след­не­го строч­но­го бок­са в обыч­ном по­токе

Базовую линию нельзя сместить через vertical-align, если вдруг вы ошибочно так восприняли. Ее может сменить изменение высоты строки или over­flow от­лич­ный от vis­i­ble, т.к. в этом случае как бы весь блок становится одним строчным боксом независимо от кол-ва строк внутри.

Вот тут или тут конкретно описано как работает определенное значение для vertical-align

[Александр]

Вадим Белкин, я не тот пример скинул просто, вот что я имею ввиду
Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.

https://codepen.io/Cepairda/pen/OZPeyV Ровняем первый
https://codepen.io/Cepairda/pen/QrNqoY Ровняем второй

Как видно, все работает логично, как написано выше. Середина элемента равняется по базовой линии
+ половина высоты X.

Но как это работает в этом случае ?
Ок допустим первый выровнялся по базовой линии второго блока, а по чем тогда равняется потом второй блок, что она становится так ?
https://codepen.io/Cepairda/pen/qYNJeb

[Вадим Белкин]

Александр, https://codepen.io/Cepairda/pen/qYNJeb в этом случае они выравниваются относительно середин друг друга. Хотя если задуматься в спецификации и логики реализации, то выходит что vertical-align: middle реально смещает базовую линию. Если это и правда так, то я был не прав на счет того что vertical-align: middle не влияет на базовую линию

[Александр]

Вадим Белкин, по-моему в этом случае вообще что-то не понятное. Потому что по логике если, потом второй блок равняется по базовой линии первого по середине + пол высоты x, то расстояние сверху должно быть меньше, чем снизу

[Александр]

Вадим Белкин, этот вопрос, как они равняются, не дает мне спокойно спать несколько дней)