垂直对齐DIV [英] Vertical-Align a DIV

问题描述

这是我在 http://ilikeyou.tk/763/：

 < div class =navigation> 
< a href =<？echo $ site;？><？echo $ prevs ['id']？> class =prevtitle =Previous Like>< / a> 
 <？ if（$ nexts ['id'] ==''）{？> 
 
 <？ } else {？> 
< a href =<？echo $ site;？><？echo $ nexts ['id']？> class =nexttitle =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; 
} 
 
。导航a.next {
 background：url（'images / nav_right.png'）; 
 float：right; 
 width：50px; 
 height：50px; 
 margin-right：10px; 
 
  

谢谢！

解决方案

所以，我猜测内容区域的高度并不是非常的静态。 b
$ b

http://jsfiddle.net/aBzhu/

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

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

适合你的用法我想。

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

Edit2：另外如果你对这样一个小小的方法不感兴趣，你应该检查一下使用jQuery在屏幕上居中显示DIV

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！