Как бы это отцентрировать вертикально

[borus]

Здравствуйте.

Посоветуйте пожалуйста, как отцентрировать здесь вертикально относительно изображения с "?" слова "Вопросы" и "

2

Subcategories"

Если например делать таблицей div с классом parent_left и применять vertical-align:middle для блока со словом "Вопросы", то блок с классом parent_right(2 Subcategories) уходит на следующую строку...

Edited June 16, 2013 by borus

[Николя223]

Ну.. если вы делаете таблицей, то не стоит забывать, что они состоят из самой таблицы, строк и ячеек...

Затем останется класс parent_data_82. ему ширину стоит отменить, и , так как он отображается как строчно-блочный элемент, надо vertical-align немного подкрутить... пикселей 20...

Edited June 16, 2013 by Николя223

[borus]

Ну.. если вы делаете таблицей, то не стоит забывать, что они состоят из самой таблицы, строк и ячеек...

т.е. надо li назначить display:table, div.index_cat - display:table-row, а div.parent_left c div.parent_right - display:table-cell?

Здесь, если я правильно понял, написано, что элементы с display:inline-block и так поддаются vertical-align. div.parent_data_82 и так уже строчно-блочный. Выходит все эти выше предложенные display:table и не нужны?..

Edited June 17, 2013 by borus

[Switch74]

http://jsbin.com/iyujof/1/edit

[Николя223]

Здесь, если я правильно понял, написано, что элементы с display:inline-block и так поддаются vertical-align. div.parent_data_82 и так уже строчно-блочный. Выходит все эти выше предложенные display:table и не нужны?..

получается так. Всё от ситуации зависит =) В таблице vertical-align - выравнивает элементы внутри ячеек, а для элементов, отображаемых как строчно-блочные, vertical-align вертикально выравнивает сами элементы)

[borus]

Здесь, если я правильно понял, написано, что элементы с display:inline-block и так поддаются vertical-align. div.parent_data_82 и так уже строчно-блочный. Выходит все эти выше предложенные display:table и не нужны?..

получается так. Всё от ситуации зависит =) В таблице vertical-align - выравнивает элементы внутри ячеек, а для элементов, отображаемых как строчно-блочные, vertical-align вертикально выравнивает сами элементы)

проверяя выше вами сказанное добавил к <div class="parent_data_82"> стиль vertical-align: middle и блок сместился вниз Почему?

Edited June 18, 2013 by borus

[Switch74]

потому что у вас середина для parent_left ниже parent_img

parent_img укажите vertical-align: middle и все будет

[borus]

потому что у вас середина для parent_left ниже parent_img

parent_img укажите vertical-align: middle и все будет

Благодарю. Почему-то тот же эффект от vertical-align: middle не проявился на <div class="subcats_num">. Почему?

[Switch74]

а относительно чего вы хотели, чтобы этот эффект проявился, он же у вас совершенно в другом контейнере, размеры которого даже никак не связанны с тем в котором мы выравнивали текст относительно картинки. Если бы вы смотрели мой пример, который я делал для вас в самом начале, то увидели бы там такой элемент, как helper который растягивается на всю высоту родителя и относительно которого выравниваются все элементы, но почему-то вопросов никаких не возникло по нему.

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

[Николя223]

хм... намекаю.. у .parent_right фиксированная высота, а у .parent_left автоматическая) полученная в следствии растяжения вложенным изображением. уберите у второго высоту. и вертикальное выравнивание у первого )

upd: прочитайте как происходит выравнивание в строчно-блочных элементах, что такое top , sub , middle и baseline

upd2: делайте через table-cell. за саму таблицу возьмите ваш злосчастный пункт списка внутренний div за строку и т. д.

вопрос: а зачем там список с одним пунктом? у вас будет большое меню?