这是我的代码的简化版本:http://jsfiddle.net/f6GCz/
我正在尝试使用以下代码将“了解更多”框垂直居中:
position: absolute;
margin-left: auto;
margin-right: auto;
什么会导致这个盒子不垂直居中?即使我对其应用宽度,它也不起作用。首选跨浏览器解决方案(IE8+)!
最佳答案
如果您必须使用绝对定位,请将此添加到您的“了解更多”框 css:
left:50%;
width:90px;
margin-left:-45px;
其中 margin-left 始终是容器宽度的 1/2。
更新
如果你不必使用absolute,那么给div一个宽度并将margin设置为:
margin:0 auto;
如果需要,宽度可以是百分比而不是 px
值。
已更新 fiddle有两个结果。
更新二
如果您想在不指定为绝对对齐的情况下对齐了解更多框,请将其放在位于底部的页脚容器中,然后在其上使用 margin:0 auto
。像这样:Fiddle 2
关于html - 一个 div 在另一个 div 中的垂直对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24371435/