垂直对齐 DIV
这是我在 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;
}
谢谢！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
所以，我猜测内容区域的高度不是很静态。
http://jsfiddle.net/aBzhu/
技巧是将外部元素设置为
position ： 相对的; float: left;然后是要居中的元素position:absolute;顶部：50%； margin-top: -Half_the_height_of_this_element;请注意，只有当您想要垂直居中的元素是静态高度时，这才有效。我认为应该适合您的用法。
编辑：哦..我认为这不一定适用于 ie6。但确实有效 ie7+
Edit2：另外，如果您对这种微不足道的方法不感兴趣，您应该检查一下 使用 jQuery 将 DIV 置于屏幕中央
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 asposition: 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
vertical-align旨在用于表格单元格渲染，即使这样也存在很大问题。为什么不在导航ul中添加一些顶部填充像素呢？这不是真正的居中，但当您使用固定高度图形作为导航背景时，您显然并不担心动态缩放。vertical-alignis intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigationul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.这个解决方案非常适合小文本。即使它是一个链接或只是 div 内的文本，此 CSS 类也可以垂直对齐 DIV 内的内容。也适用于 IE...
希望这有帮助...
问候，ADynaMic
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
Hope this helps....
Regards, ADynaMic