Почему не смещается текст?

[borus]

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

Пытаюсь сдвинуть текст вниз относительно исходной позиции. Значение bottom для vertical-align работает, но слишком занижает, надо некое промежуточное положение по вертикали, Пытаюсь процентами задать вот так:

.moduletable_cats>h3{
background:url('../images/cat_header_small.jpg') no-repeat center bottom;
height:34px;
width:238px;
padding-left:7px;
color:white;
margin-bottom:0;
display:table-cell;
vertical-align: -30%;
}

и +30% пробовал. никак.

Что не учитываю?

Благодарю

Edited April 17, 2013 by borus

[Switch74]

там же вроде указано, что

При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

[borus]

никак не могу понять как применить ваш совет

выглядит это пока так:

Edited April 17, 2013 by borus

[Great Rash]

Вам надо по вертикали выровнять по центру? Тогда просто укажите middle и забейте на проценты. Если надо сместить немного наверх, то укажите margin-top: -10px; или position: relative; top: -10px;

[borus]

Вам надо по вертикали выровнять по центру? Тогда просто укажите middle и забейте на проценты. Если надо сместить немного наверх, то укажите margin-top: -10px; или position: relative; top: -10px;

только middle заработал. правда надо бы сместить чуть ниже. Попробую выложить в сеть через час, чтобы не на пальцах было.

[Switch74]

там же вроде указано, что

При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

это значит, чтобы заработал vertical-align в процентах, нужно чтобы этому блоку был указан line-height

[Great Rash]

http://jsfiddle.net/ybY4k/

[borus]

http://jsfiddle.net/ybY4k/

попробовал ваш пример: если назначаю table родительскому тегу, то рушится нижележащий слой с категориями.

Вот реальный образец, где заголовок Категории надо на пару пикселей ниже сместить

Edited April 17, 2013 by borus

[Great Rash]

попробовал ваш пример: если назначаю table родительскому тегу, то рушится нижележащий слой с категориями.

Потому что кроме table-cell нужна еще table-row. Вы представляете себе таблицу? Вы добавляете ячейки, но не добавляете строки. Естественно ячейки в таблице встают рядом, а не друг под другом. Ваш HTML надо модифицировать так:

<div class="moduletable_cats" style="display: table;">
    <div style="display: table-row;">
	    <h3 style="display: table-cell;">Категории</h3>
    </div>
    <div style="display: table-row;">
	    <ul class="VMmenu" id="VMmenu676_9885" style="display: table-cell;">
		    ...
	    </ul>
    </div>
</div>

[borus]

попробовал ваш пример: если назначаю table родительскому тегу, то рушится нижележащий слой с категориями.

Потому что кроме table-cell нужна еще table-row. Вы представляете себе таблицу? Вы добавляете ячейки, но не добавляете строки. Естественно ячейки в таблице встают рядом, а не друг под другом. Ваш HTML надо модифицировать так:

<div class="moduletable_cats" style="display: table;">
<div style="display: table-row;">
	 <h3 style="display: table-cell;">Категории</h3>
</div>
<div style="display: table-row;">
	 <ul class="VMmenu" id="VMmenu676_9885" style="display: table-cell;">
		 ...
	 </ul>
</div>
</div>

Понял, благодарю

Edited April 17, 2013 by borus