Почему не работает vertical-align в блоке?

Question

[Виталий]

Помогите разобраться с проблемкой.
В блоке с ссылкой текст не выравнивается по центру.
Вроде и display:inline-block есть, а vertical-align: middle почему то не работает. В последней строке CSS.
https://jsfiddle.net/xSnaip/u1a2kbdo/

Answer 1

[Андрей Федоров]

Это широко известный "глюк". Что бы его убрать, нужно поместить в тот же контейнер еще один div 100% высоты. Для наглядности я сделал его яркокрасным. Ширина его значения не имеет, даже если нулевая - это решит ваш вопрос.

jsfiddle.net/pc9k1cz7

И уберите везде position: relative, вы неправильно им пользуетесь...

Comments

[Виталий]

Благодарю, не знал про "глюк".

Answer 2

[Roger]

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

htmlbook.ru/css/vertical-align

В большинстве случаев с этим свойством будешь работать в таблицах.
Сделай display: table-cell;
и заработает.

Comments

[Виталий]

Так действительно работает. Только тогда приходится float:right для блока в котом ссылка использовать. Правда хотелось бы узнать все же почему не работает с inline-block. Вроде бы везде написано что с блочными элементами не работает, а со строчными и с inline-block должно работать.

[Roger]

xSnaip: Такова его специфика

[Виталий]

Тогда еще вопросик. Может и глупый, но все же. С точки зрения красоты и этичности кода нормально что все перемешано (block, inline-block, table, table-cell) в коде и то что по сути table и table-cell используется не для построения таблицы, а просто из за выравнивая текста ?
Благодарю за помощь.

[Roger]

xSnaip: Как говориться: "На войне все средства хороши". Но в меру, в зависимости от ситуации. Главное - не делайте каркас при помощи таблицы.
Советую приобрести книгу "Большая книга CSS3. Дэвид Макфарланд" - хорошая вещь

[Jimmy Exploit]

table и table-cell используется не для построения таблицы, а просто из за выравнивая текста

да, это какое то безумие. особенно если нужны адаптивные размеры. мне пришлось подтягивать js, для выравнивания текста по вертикали. просто смешно

Answer 3

[Константин Б.]

при чем тут inline block? и вобще чего ты хочешь добиться хоть картинку покажи?

Comments

[Виталий]

Хочу чтобы текст в блоке (справа от картинки) был выравнен по вертикали по центру (как картинка слева от текста)
https://yadi.sk/i/T6YqpT4ugU8RL - вот так чтобы было.
P.S. Там возможно если ширина окна маленькая, то блок с текстом вниз сползает. И тогда наверное не совсем понятен вопрос.