vertical align у inline-block

[sond1k]

<div class="parent">    <div class="helper"></div>    <div class="child">TEXT</div></div>

.parent {    height:100px;    width:600px;    border:1px solid #ff0000;}.helper {    display:inline-block;    height:100%;    width:1px;    background:green;}.child {    display:inline-block;    vertical-align:middle;    border:1px solid #0000ff;}

Не могу понять, как работает способ вертикального центрирования.

https://jsfiddle.net/mws18yoL/

 

Если дать элементу .helper vertical-align:middle, то центрируется отлично. Без этого нет. Но ведь должно и без того?

Высота строки задана блоком .helper в 100% от родителя. Далее известно следующее - vertical-align:middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. Базовая линия - по низу .helper + половина высоты родительского элемента. Следуя этому элемент .child должен быть сейчас центрирован, однако на деле он просто сопоставил свою середину с базовой линией. Объясните пожалуйста, чего я не понимаю??

[Igor Schnaider]

Вот, нашел. Мне в свое время эта статья сильно помогла разобраться с вертикальным выравниванием.

[Igor Schnaider]

Вообще, спецификация говорит примерно: средняя точка между верхним и нижним краями выравнивается по базовой линии плюс половина высоты символа x.

 

В общем, vertical-align на .child выравнивает сам чайлд относительно базовой линии. Но она (базовая линия) по-прежнему остается внизу. А вот .helper по сути выталкивает ее на середину, и вместе с ней и .child.

 

Попробуйте создать вспомогательную линию, чтобы увидеть, как все происходит (1, 2).

Edited December 7, 2015 by Igor Schnaider

[sond1k]

Вообще, спецификация говорит примерно: средняя точка между верхним и нижним краями выравнивается по базовой линии плюс половина высоты символа x.

 

В общем, vertical-align на .child выравнивает сам чайлд относительно базовой линии. Но она (базовая линия) по-прежнему остается внизу. А вот .helper по сути выталкивает ее на середину, и вместе с ней и .child.

 

Попробуйте создать вспомогательную линию, чтобы увидеть, как все происходит (1, 2).

 

Я понимаю, что .child выравнял свой центр по базовой линии? А как же половина высоты символа x? Почему она проигнорирована? И как .helper может сдвинуть базовую линию? Как я понимаю, vertical-align:middle для .helper должен выровнять его середину по базовой линии и опять же + половина x-высоты?

Edited December 7, 2015 by sond1k

[Igor Schnaider]

В смысле проигнорирована? Вот, все норм.

А что касается .helper, то да, он сдвигает базовую линию по тем же правилам. Фактически, он поднимается, чтобы его средняя точка + x-высота совпала с позицией, но так как вверху места нет, съезжает базовая линия.

Edited December 7, 2015 by Igor Schnaider

[sond1k]

В смысле проигнорирована? Вот, все норм.

А что касается .helper, то да, он сдвигает базовую линию по тем же правилам. Фактически, он поднимается, чтобы его средняя точка + x-высота совпала с позицией, но так как вверху места нет, съезжает базовая линия.

 

хм. Т.е. x-высота определяется изнутри? А если у меня там 5 строк с 5 разными размерами шрифтов?

И по поводу смещения базовой линии? Ни где ведь не сказано, кажется, что она куда то смещается?

В смысле проигнорирована? Вот, все норм.

А что касается .helper, то да, он сдвигает базовую линию по тем же правилам. Фактически, он поднимается, чтобы его средняя точка + x-высота совпала с позицией, но так как вверху места нет, съезжает базовая линия.

Никак не могу понять

 

Базовая линия строки - по низу helper, если даем ему middle - он должен выровнять свой центр с ней. А потом взять половину x-высоты...

И еще, в спецификации сказано, что x-высота родителя - родитель тут вообще блочный div?

[Igor Schnaider]

Еще раз, высокий контейнер сейчас "отцентрировался" по базовой линии. Но его высота выходит за пределы экрана, поэтому он съезжает вниз, чтобы вместиться. Но вместе с ним и базовая линия вынуждена "съехать" тоже. В спецификации это явно не сказано, но это логично ведь.

Если бы не съезжала, то в вашем примере базовая линия всегда наверху оставалась бы, а не внизу высокого контейнера (.parent).

[sond1k]

ДА! То, что вы говорите - логично.

Но я не могу понять логики происходящего )

 

1. helper на всю высоту parent - базовая линия по нижней границе helper

2. даем helper vertical-align:middle - базовая линия была по низу helper, и если по ней центрировать середину элемента, он вниз должен уехать, а не вверх.

3. Должен подняться на x-высоту родителя. Родитель - блочный div? Откуда и как тут x-высота?))

[Igor Schnaider]

даем helper vertical-align:middle - базовая линия была по низу helper, и если по ней центрировать середину элемента, он вниз должен уехать, а не вверх.

Да, вниз конечно, я перепутал. Но вверху свободное пространство, он обратно поднялся.

Блин, нет, все-таки вниз :-)

Примерно так.

 

 

Должен подняться на x-высоту родителя. Родитель - блочный div? Откуда и как тут x-высота?))

Половина высоты буквы x. У этого блочного элемента есть своя установленная гарнитура. Вот половина высоты буквы x в соответствии с ней и есть половина x-высоты.

Edited December 7, 2015 by Igor Schnaider

[sond1k]

 

даем helper vertical-align:middle - базовая линия была по низу helper, и если по ней центрировать середину элемента, он вниз должен уехать, а не вверх.

Да, вниз конечно, я перепутал. Но вверху свободное пространство, он обратно поднялся.

 

 

Должен подняться на x-высоту родителя. Родитель - блочный div? Откуда и как тут x-высота?))

Половина высоты буквы x. У этого блочного элемента есть своя установленная гарнитура. Вот половина высоты буквы x в соответствии с ней и есть половина x-высоты.

 

 

Но он поднялся ровненько на половину высоты блока ) Это откуда такая гарнитура? шрифт у блока parent verdana 16px, предположим

Почему вы рисуете базовую линию по середине? Изначально же не было vertical-align:middle у helper, и контента в нем нет. В спеке сказано, что в таком случае его baseline по его нижней границе

Я наверно не могу понять, что там с базовой линией происходит. Если я даю элементу vertical-align:middle - его базовая линия меняется? 

Edited December 7, 2015 by sond1k

[Igor Schnaider]

Почему вы рисуете базовую линию по середине?

На так потому что мы ему ставим vertical-align: middle;

 

Но он поднялся ровненько на половину высоты блока

Вот

А спецификация говорит: выравнить вертикальную среднюю точку бокса по базовой линии родителя плюс половина x-высоты. Вот здесь и видно, что красная линия (va: middle) как раз с серединой Text совпадает.

[sond1k]

 

Почему вы рисуете базовую линию по середине?

На так потому что мы ему ставим vertical-align: middle;

 

 

 

Но он поднялся ровненько на половину высоты блока

Вот

А спецификация говорит: выравнить вертикальную среднюю точку бокса по базовой линии родителя плюс половина x-высоты. Вот здесь и видно, что красная линия (va: middle) как раз с серединой Text совпадает.

 

 

Т.е. vertical-align: middle смещает базовую линию элемента и отсюда уже "дальше едем"?) Но тогда как догадаться, куда сместиться базовая линия элемента, если он пуст, например, при text-top?

 

Так а почему вы серую X родителя нарисовали именно такого размера? Может у родителя у меня шрифт 10px а у child 20px?

Edited December 7, 2015 by sond1k

[Igor Schnaider]

Т.е. vertical-align: middle смещает базовую линию элемента и отсюда уже "дальше едем"?)

Да. Все пляшет от baseline, кроме двух значений: top и bottom. Они связаны с краями бокса строки.

 

Так а почему вы серую X родителя нарисовали именно такого размера?

Я не рисовал. Я размер шрифта на родителя поставил. Поменяйте и посмотрите, что будет, например: 1, 2 ну и так далее.

[sond1k]

Спасибо большое, я наконец то понял, что вы пытались сказать. Только вот момент с "базовая линия" смещается при том или ином vertical-align туда то.. При middle логично, что в серединку. Но там значений то много, можно где то про это почитать?

[psywalker]

А я бы ещё посоветовал нашу с Ильёй книжечку, как раз по теме.

[Launder]

Вот этот, на мой взгляд, очень удачный пример:

 

http://codepen.io/anon/pen/pgvoWo?editors=110

 

Как раз по прочтении указанной выше книжечки, я понял примерно так:

 

1. базовая линия в лайн-боксе (строке) определяется самым высоким инлайн-элементом и распологается на 0.5ex ниже центра лайн-бокса.

2. для того чтоб шрифт был ровно по-середине базовую линию нужно сначала поднять "обратно" на 0.5ex тогда базовая линия будет ровно по середине.

3. А затем опустить на половину высоты шрифта -0.5em.

ЗЫ: нужно помнить что ex от ем отличаются.