垂直对齐DIV

问题描述

这是我在

技巧是让外部元素设置为 position：relative; float：left; ，然后将要居中的元素设置为 position：absolute;顶部：50％; margin-top：-Half_the_height_of_this_element;

请注意，这仅适用于要垂直居中的元素是静态高度。

适合你的用法我想。

编辑：哦..我不认为这必然在ie6中起作用。但确实有效ie7 +

Edit2：另外如果你对这样一个小小的方法不感兴趣，你应该检查一下

This is the code for my next/prev navigation found at 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>

I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.

Here is my 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;
}

Thanks!

解决方案

So, I'm guessing that the content area height is not very static.

http://jsfiddle.net/aBzhu/

Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;

Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.

Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+

Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen

这篇关于垂直对齐DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！