Выровнять по вертикали DIV - PullRequest
Новая
       2

Выровнять по вертикали DIV

2 голосов
/ 08 августа 2011

Это код для моей следующей / предыдущей навигации, найденный в 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;
}

Спасибо!

Ответы [ 3 ]

2 голосов
/ 08 августа 2011

Итак, я предполагаю, что высота области содержимого не очень статична.

http://jsfiddle.net/aBzhu/

Хитрость заключается в том, чтобы внешний элемент был установлен на position: relative; float: left;, а затем элемент, который вы хотите центрировать как position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;

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

Редактировать: Ох .. и я не думаю, что это обязательно работает в ie6. Но работает ли ie7 +

Edit2: Также, если вы не заинтересованы в таких мелких методах, вы должны проверить это Использование jQuery для центрирования DIV на экране

1 голос
/ 08 августа 2011

vertical-align предназначен для визуализации ячеек таблицы, и даже это довольно проблематично. Почему бы просто не добавить несколько пикселей верхнего отступа к вашей навигации ul? Это не настоящее центрирование, но вы, очевидно, не беспокоитесь о масштабировании по шкале Дунама, когда используете фоновую графику с фиксированной высотой для фона навигации.

0 голосов
/ 16 октября 2011

Это решение идеально подходит для небольших текстов. Даже если это ссылка или просто текст внутри div, этот класс CSS может выровнять содержимое внутри DIV по вертикали. Работает и для IE .. 

 .verticalCenterDivText{
        height: 29px;
        line-height: 29px;
    }

Надеюсь, это поможет ....

С уважением, ADynaMic

...