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; top: 50%; margin-top: -Half_the_height_of_this_element;

请注意，这仅适用于您想要垂直居中的元素是静态高度。我认为应符合您的用法。

编辑：哦..我不认为这必然适用于ie6。但是工作ie7 +

Edit2：如果你对这种微不足道的方法不感兴趣，你应该看看Using jQuery to center a DIV on the screen

Answer 2

vertical-align用于表格单元格渲染，甚至这也很成问题。为什么不在导航ul中添加几个顶部填充像素？这不是真正的中心，但是当你使用固定高度的图形作为导航背景时，你显然不担心dunamic缩放。

Answer 3

此解决方案非常适合小文本。即使它是div中的链接或文本，这个CSS类也可以垂直对齐DIV中的内容。也适用于IE ..

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

希望这会有所帮助......

问候，ADynaMic

垂直对齐DIV

3 个答案: