Вопросы:
1) Я выравниваю - Блок1 с помощью vertical-align: middle, почему тогда текст так и остается вверху.
2) Почему Блок 2 выравнялся посередине, если выравниваем Блок 1 ?
1. На инлайн блоках vertical-align работает для выравнивания по вертикали самих блоков, а не их контента. Плюс сам Блок 1 у вас на всю высоту растянут, а текст внутри кверху прибит по обычному поведению
2. Блок 2 выровнен по базовой линии, у него не установлен vertical-align, а по-умолчанию он baseline, что в данном случае почти похоже на middle (но различия в этом есть)
Почитайте про работу 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 не ставит базовую линию по центру, она остается там где была, просто блоки выравниваются по центру
цитата из первой ссылки про инлайн блоки
Для многострочных инлайн-блоков базовой линией является базовая линия последнего строчного бокса в обычном потоке.
Если внутри инлайн-блока нет боксов обычного потока, или же у инлайн-блока стоит overflow отличный от visible, то базовой линией становится нижняя граница блока.
заметьте, что для инлайн блоков, инлайн таблиц и флексов базовая линия работает по разному, а так же для элементов с overflow: auto
Вадим Белкин, Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.
Как видно, все работает логично, как написано выше. Середина элемента равняется по базовой линии
+ половина высоты X.
Но как это работает в этом случае ?
Я вижу только одно обьяснение, сначала первый блок равняется по базовой линии второго. При этом его базовая линия становится по центру,
после чего по ней равняется второй блок.
Александр, https://codepen.io/Cepairda/pen/JvXrQb базовая линия никуда не становится, она не смещается данными стилями. В данном примере получилось так что второй блок выровнился своим центром по базовой линии первого элемента, как вы сказали, но базовая линия второго не сместилась, она по прежнему проходит в том же месте, как если бы был другой vertical-align, конкретно
Для многострочных инлайн-блоков базовой линией является базовая линия последнего строчного бокса в обычном потоке
Базовую линию нельзя сместить через vertical-align, если вдруг вы ошибочно так восприняли. Ее может сменить изменение высоты строки или overflow отличный от visible, т.к. в этом случае как бы весь блок становится одним строчным боксом независимо от кол-ва строк внутри.
Вот тут или тут конкретно описано как работает определенное значение для vertical-align
Вадим Белкин, я не тот пример скинул просто, вот что я имею ввиду
Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.
Как видно, все работает логично, как написано выше. Середина элемента равняется по базовой линии
+ половина высоты X.
Но как это работает в этом случае ?
Ок допустим первый выровнялся по базовой линии второго блока, а по чем тогда равняется потом второй блок, что она становится так ? https://codepen.io/Cepairda/pen/qYNJeb
Александр, https://codepen.io/Cepairda/pen/qYNJeb в этом случае они выравниваются относительно середин друг друга. Хотя если задуматься в спецификации и логики реализации, то выходит что vertical-align: middle реально смещает базовую линию. Если это и правда так, то я был не прав на счет того что vertical-align: middle не влияет на базовую линию
Вадим Белкин, по-моему в этом случае вообще что-то не понятное. Потому что по логике если, потом второй блок равняется по базовой линии первого по середине + пол высоты x, то расстояние сверху должно быть меньше, чем снизу
