垂直居中在动态高度div内的内容

Question

可能重复:
在动态高度的Div内垂直居中HTML元素

我目前正在设计一个网站,我需要垂直居中一些内容.设计非常基本:固定高度标题(左对齐并始终位于页面顶部),以及水平行中垂直居中的图像下方(是的,水平滚动,我知道).

理想情况下,我希望图像的垂直居中基于视口的100%高度 - 标题(因此动态高度可防止内容与标题重叠).

可以在http://bit.ly/vl1XNY上找到该网站的示例,该网站目前正在使用表格进行布局.我使用的css和html也可以在那里找到(当然).

我知道在固定高度的容器内垂直居中内容的各种解决方案,但是它们都没有对我有效,因为我使用可变高度并且不想使用绝对定位(以防止重叠).我环顾四周,尝试了表格单元解决方案,行高度解决方案和绝对定位解决方案.

到目前为止,唯一能够按照我的预期工作的解决方案是使用表格.但我想不要使用它们.是否有人知道这个问题的有效的CSS和HTML解决方案？或者至少是一个更优雅的解决方案？

Answer 1

谈到时间问题,我几分钟前就在寻找这样一个解决方案,并且在这个问题上发现了一篇关于这个问题的文章,你可以在这里读到它的全部内容:以未知为中心.

您可以轻松修改代码,使其工作如下:

CSS

#wrapper {
    background: none repeat scroll 0 0 blue;
    height: 100%;
    text-align: center;
}

#wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.center {
    display: inline-block;
    padding: 10px 15px;
    vertical-align: middle;
    width: 460px;
}

HTML

<div id="wrapper">
    <div class="center">
        <img src="images/a_1.jpg" alt=" ">
    </div>
    <div class="center">
        <img src="images/a_2.jpg" alt=" ">
    </div>
</div>