Помогите разобраться с параметром "vertical-align"

[marrone-art]

.menu_but{margin:0; padding:0; width:300px;background: #0420c3; list-style:none;}

.menu_but li{padding:0; margin:0 0 1px 0; height:67 px; }

.menu_but li a{

text-align:left;

height:67px;

padding:0px 25px;

font:16px Verdana, Arial, Helvetica, sans-serif;

color:rgb(255,255,255);

display:table;

vertical-align:middle;

background:url("../images/but.png");

background-repeat:no-repeat;

text-decoration:none;

outline:none;}

.menu_but li a:hover{background:url("../images/but_a.png");}

.menu_but li a.active, .menu li a.active:hover{background:url("../images/but.png");}

.menu_but li a span{line-height:15px;}

Если я правильно понимаю параметр vertical-align "Применяется К встроенным элементам или ячейкам таблицы"

display:table;

почему тогда не работает?

[d0ublezer0]

Уточните, не работает что? И какое поведение от этого кода вы ожидаете?

Edited November 12, 2010 by d0ublezer0

[marrone-art]

Добиться хочу вертикальной центровки, но я уже сделал с помощью padding и margin

Меня интересовало почему не работает vertical-align:middle;

[rus]

line-height:...; должен помочь.

[bref]

Да кстати, все назревал такой вопрос: Для каких случаев вообще придуман vertical-align ?

Сколько не пробовал его использовать ничего не выравнивалось.

[SelenIT]

Если я правильно понимаю параметр vertical-align "Применяется К встроенным элементам или ячейкам таблицы"

display:table;

почему тогда не работает?

Может быть, потому, что таблица не является ни инлайновым элементом, ни ячейкой?

[marrone-art]

Хорошо... возможно... Ну а для чего тогда его использовать...

З.Ы. line-height не помогло

Edited November 12, 2010 by marrone-art

[rus]

З.Ы. line-height не помогло

слишком мало инфы нам для того что бы разобраться в ситуации.

кидайте свой код сюда html и css и скажите чего вы хотите добиться.

[marrone-art]

Всем спасибо разобрался, помогло:

display:inline-block;

vertical-align:middle;

[foax]

Доброго времени суток!

У меня возникла похожая проблема. Обрисую в крации:

Есть некоторый блок в который вставлено изображение-ссылка (или просто картинка). Необходимо это изображение расположить по центру блока.

Трудности! Изображения загружаются пользователями и не возможно указать жесткие размеры изображения, известно лишь что наибольшая сторона имеет ширину (или высоту) 200px. Фактически блок это контейнер для изображения, в который помещены разнокалиберные картинки, что бы избежать хаотичного наползания изображений.

Вот примерный код:

.imgp_lightshow_box{
 width:300px; 
 height:300px;
 text-align: center;
 vertical-align: middle;
} 

<div class='imgp_lightshow_box'><a href='#'><img  src='#.jpg' /></a></div>

Так вот, text-align: center; прекрасно работает в горизонтальной плоскости, а vertical-align: middle; не действует.

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

P.S. Пробовал через padding: auto; и путем дополнительного блока внутри блока .imgp_lightshow_box с margin: auto; все это не работает. Точнее работает, но только по-горизонтали.

[psywalker]

А таблица с одной ячейкой не прокатит?