html - 一个 div 在另一个 div 中的垂直对齐不起作用

标签 html css

这是我的代码的简化版本: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/

相关文章:

html - 没有浏览器滚动条的垂直固定和流动布局

html - 更改选项中文本的颜色

javascript - 垂直导航栏 ​​- Onclick 功能不起作用

css - 修复 Angular-UI-Bootstrap 中的轮播容器大小

javascript - 如何在点击 div 时添加弹跳效果

jquery - 如何使网站在移动设备上显示为完整站点?

CSS 使用你自己的字体

javascript - 如何获取文档的整个宽度和高度(无 jQuery)

html - 为什么 href ="http://...."将我定向到 "https://..."?

html - 子类的CSS属性选择器