Почему не работает vertical-align для inline-block?

Question

[Артур Пантелеев]

jsfiddle.net/8p4cg

Что я делаю не так?

Comments

[Антон]

Какая минимальная версия ИЕ?

[Артур Пантелеев]

@Mew 9

Answer 1

[Vitaly Musin]

Почему не работает читайте здесь
Как вариант посмотрите такое решение

Comments

[Владлен Грачев]

line-height: 250px?
Надеюсь, вы пошутили.

[Артур Пантелеев]

@vmpartner спасибо с таким ешением я знаком, но оно чревато вот этим:
jsfiddle.net/7GULB/

[Vitaly Musin]

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

Answer 2

[Антон]

Почему вы решили, что не работает? Какого поведения вы ждете от такого кода?

Comments

[Артур Пантелеев]

@Mew уже понял что ошибка скорей у меня. Я хотел чтобы текст выровнялся внутри li

[Артур Пантелеев]

наверно этот ответ отмечу как правильный, все таки проблема в том что я не понял изначально как работает свойство

[Антон]

В самом последнем комментарии я привел пример того, что может вам помочь.

Answer 3

[Владлен Грачев]

Вы используете vertical-align для блочного элемента. А оно только для табличных работает (и еще инлайновых, кажется, но и там свои особенности). Используйте display: table-cell, например.
jsfiddle.net/8p4cg/1/

Comments

[Антон]

table-cell растянет соседние ячейки в случае превышения контента
jsfiddle.net/8p4cg/4/ и вообще имеет ряд ограничений и особенностей, которые могут аукнуться. Ну и не работает в ИЕ7

[Владлен Грачев]

В IE8- вообще мало что работает.
А если вы посмотрите на пример ТС, то увидите, что там вместо height прописано min-height. Я имитировал именно то поведение, которое закладывалось изначально.
Что касается ограничений и проблем из-за особенностей — это все надо решать по мере возникновения этих самых проблем. Любое решение имеет ряд особенностей, не верстать же теперь все картинками?

[Антон]

Полагаю, что min-height написан не с проста, а в расчете, что блок может быть выше это высоты и не факт, что нужно, чтоб соседние блоки тянулись за ним.
Так или иначе ваш способ конечно же имеет место быть, просто я указал на его особенности.

[Владлен Грачев]

Невнимателен был. Теперь понял, о чем вы. Действительно, такая особенность есть. Как вариант, можно обернуть каждый блок меню в отдельный контейнер, чтоб они не соседствовали.
Главное же было, скорее, дать ТС понять, почему не работает свойство, а не найти решение всех его проблем. Задачи-то разные бывают.

[Антон]

Оборачивание не поможет, точнее вызовет другие проблемы в случае большого количества текста.
На самом деле ваш первоначальный ответ не совсем верен.
Vertical-align работает и на inline, inline-block, просто совсем не так, как у ячеек таблиц. Он выравнивает блоки относительно соседних, а не контент внутри них.

[Владлен Грачев]

А что, собственно, иначе в моем ответе? Я упомянул и об инлайновых элементах, и о наличии своих особенностей в них.
Давайте дождемся вопрошающего и прекратим холивар, он все равно какой-то посредственный (=

Answer 4

[Антон]

jsfiddle.net/8p4cg/3/
Если над ИЕ7, вставьте около текста пустые спаны с каким-нибудь классом и замените селектор :before на этот класс.