php - 垂直对齐 DIV

Question

这是我在 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;
}

谢谢!

Answer 1

所以，我猜测内容区域的高度不是很稳定。

http://jsfiddle.net/aBzhu/

技巧是将外部元素设置为 position: relative; float: left; 然后是你想要居中的元素 position: absolute;顶部:50%； margin-top: -Half_the_height_of_this_element;

请注意，这仅在您想要垂直居中的元素是静态高度时才有效。我认为应该适合您的用途。

编辑:哦..而且我认为这不一定适用于 ie6。但 ie7+ 确实有效

Edit2:另外，如果你对这种微不足道的方法不感兴趣，你应该检查一下 Using jQuery to center a DIV on the screen