html - 如何使我的包装器 垂直居中并响应？

Question

我希望包装器滚动部分内的图像 float 在屏幕中间(宽)，并在屏幕尺寸改变时放大/缩小。目前它位于页眉下方，但远高于页脚。我怎样才能让它垂直居中？

CSS:

/* main content
------------------------------------------------------------------- */  

#wrapper {
   float:left;
   margin:110px 0 0 0;
   padding:0 0 0 250px;
   background:#fff;
   position:relative;
   z-index:2;
   border-bottom:solid 20px #fff;
}   
.post {
    padding:0 5px 0 0;
    background:#fff;
    height:100%;
    }
#wrapper img {
 color:#fff;
 width:auto;
 }

HTML:

<!-- section that contains all pics -->
<section id="wrapper">
    <article class="post">
    <p><img src="img/scroll/001_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/002_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/003_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/004_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/005_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

</section>
<!-- close section -->

提前谢谢大家!

Answer 1

如果你想使用 CSS 表格，我建议:

.post {
    display: table;
}
.post p {
    display: table-cell;
    vertical-align: middle;
    height: inherit; /* may not be needed */
}

display: table{-cell} 属性在较新的浏览器中得到了很好的支持，所以这应该可以解决问题。