Это код моей следующей / предыдущей навигации, найденный по адресу http://ilikeyou.tk/763/ :
<div class="navigation"> <a href="<?echo $site;?><?echo$prevs['id']?>" class="prev" title="Previous Like"></a> <? if($nexts['id'] == ''){ ?> <? }else{ ?> <a href="<?echo $site;?><?echo$nexts['id']?>" class="next" title="Next Like"></a> <? } ?> </div> Я хотел бы по вертикали центрировать кнопки. Я попытался использовать vertical-align:middle; который не сработал. Я также пробовал top:50%; но это тоже не сработало.
Вот мой css:
.navigation { position: relative; float: left; vertical-align : middle; height: auto; padding: 0; margin: 0 -20px 0 -22px; width: 636px; z-index:1; } .navigation a.prev{ background: url('images/nav_left.png'); float: left; width: 50px; height: 50px; margin-left:10px; } .navigation a.next { background: url('images/nav_right.png'); float: right; width: 50px; height: 50px; margin-right:10px; }
Благодаря!
Итак, я предполагаю, что высота области содержимого не очень статична.
Уловка состоит в том, чтобы внешний элемент был установлен в position: relative; float: left; position: relative; float: left; а затем элемент, который вы хотите центрировать как position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element; position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Обратите внимание, что это работает только тогда, когда элемент, который вы хотите центрировать по вертикали, является статической высотой. Думаю, это должно соответствовать вашему использованию.
Редактировать: Ох .. и я не думаю, что это обязательно работает в ie6. Но работает ли ie7 +
Edit2: Также, если вас не интересуют такие мелочные методы, вы должны это проверить. Использование jQuery для центрирования DIV на экране
vertical-align предназначен для рендеринга ячейки таблицы, и даже это довольно проблематично. Почему бы просто не добавить несколько пикселей верхнего дополнения к вашей навигации? Это не реальное центрирование, но вы, очевидно, не беспокоитесь о dunamic масштабировании, когда используете графику фиксированной высоты для фона навигации.
Это решение идеально подходит для небольших текстов. Даже если это ссылка или просто текст внутри div, этот CSS-класс может вертикально выравнивать содержимое внутри DIV. Работает и для IE.
.verticalCenterDivText{ height: 29px; line-height: 29px; }
Надеюсь это поможет….
С уважением, ADynaMic