Вертикальное выравнивание CSS и базовое положение

Я новичок в CSS, недавно прочитал спецификацию и столкнулся с некоторыми проблемами в понимании свойства вертикального выравнивания.

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

Вышеприведенный код создает 3 div, каждый из которых содержит 3 пустых встроенных поля (промежутка):

  1. В 1-м диве вроде все нормально. Все 3 пролета выровнены по базовой линии линейного блока.
  2. Во 2-м div, после того как я установил для свойства vertical-align значение top для 3-го диапазона, первые два диапазона перемещаются вверх. А то я отсюда теряюсь, не понимаю, зачем их поднимать вверх, по какому правилу.
  3. 3-й div мне еще больше приглянулся. Я установил для свойства vertical-align значение bottom для 1-го диапазона, и это приводит к тому, что 2-й пролет перемещается немного ниже, чем 3-й пролет (это будет заметно при достаточном увеличении).

То, что я могу найти в спецификации, говорит ниже, но что такое multiple solutions? Может ли кто-нибудь пролить больше света на это?

In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.

Я также создал скрипку. Пожалуйста, запустите его в Firefox или Chrome, если вы заинтересованы.


vertical-alignment html css baseline
person Yuan Li    schedule 20.12.2013    source источник
comment
stackoverflow .com/questions/4357315/   -  person Dilish    schedule 20.12.2013
comment
Обратите внимание, что третий пример скрипки отличается в IE (11) от Chrome (31) и Firefox (25 и 26).   -  person ajp15243    schedule 20.12.2013

Ответы (1)


arrow_upward
7
arrow_downward

vertical-align в основном используется для элемента inline, например тега img, для которого обычно устанавливается значение vertical-align: middle; для правильного выравнивания в тексте.

Демо (без использования vertical-align)

Демонстрация 2 (с использованием vertical-align)

Итак, это было общее представление о том, как vertical-align работает со значением middle.

Итак, сначала давайте посмотрим, какие допустимые значения для vertical-align имущество.

введите описание изображения здесьКредиты: Сеть разработчиков Mozilla

Теперь давайте разрешим ваши сомнения шаг за шагом.

В первом примере, по-вашему, все в порядке, но ответ - нет, вы применяете line-height к span, которые варьируются, но факт в том, что line-height на самом деле не применяется так, как вы думаете...

Высота строки на самом деле не применяется

Укажите значение inline-block, и оно будет применено

Вы можете прочитать этот ответ для получения дополнительной информации, поэтому использование line-height на span бесполезно.

Переходя ко второму сомнению, у вас line-height в первый span, во второй span, но не в третий span, так что же здесь происходит? Поскольку span соответствует inline тексту, и в любом случае line-height не будет играть там роль, как я объяснял ранее, они удачно выровнены по вертикали с текстом, тогда как при использовании vertical-align: top; два других поля над ним не перемещаются, вместо этого он выравнивается по верху текста.

Посмотрите, как vertical-align: top; выравнивается вверху текста

Возвращаясь к последнему вашему примеру, здесь первый элемент span выровнен по самому bottom, как и ожидалось, что ж, это правильно, переходя ко второму, вы сказали, что он немного ниже, чем третий, поскольку он вообще не выровнен, line-height делает этот элемент align по вертикали center и, наконец, немного перемещается к top, который фактически выровнен по top.

Давайте сделаем их inline-block и посмотрим, как они ведут себя на самом деле..

Итак, я надеюсь, вы поняли разницу между всеми тремя примерами, но вам также необходимо понять свойство line-height и свойство inline-block, также не забудьте сослаться на ответ, которым я поделился.

person Mr. Alien    schedule 20.12.2013
comment
Пожалуйста, не стесняйтесь указать на ошибку, если я ее допустил, или вы можете отредактировать мой ответ, если у вас есть больше / лучшая информация. - person Mr. Alien; 20.12.2013
comment
Привет, @Mr. Инопланетянин, я все же думаю, что свойство line-height будет применено к inline элементам. Согласно спецификации, при расчете высоты строки , 1.The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height' - person Yuan Li; 20.12.2013
comment
Я предполагаю, что установка свойства vertical-align во встроенных полях на top/down фактически изменит базовое положение линейного поля. И из-за того, что базовая линия перемещается вверх или вниз, это каким-то образом повлияет на другие поля. Но я не уверен, что иду в правильном направлении... - person Yuan Li; 20.12.2013
comment
Базовая линия @YuanLi не перемещается, прямоугольники касаются базовой линии или верхней части, в зависимости от того, что вы установили - person Mr. Alien; 20.12.2013
comment
Я прочитал ваш ответ и ссылки, а также тот, который дал Дилиш, и я все еще настаиваю, по крайней мере, на данный момент :) Может быть, мне нужно когда-нибудь переварить - person Yuan Li; 20.12.2013