html - 如何在 wrapper 的中间垂直对齐横幅

Question

我需要根据容器 div 的高度在中间垂直对齐横幅。我试过了，但它没有对齐

<div id="left-ad">
    <div id="sidebar"> <a href="#"><img src="sidewall.png" alt="LEft Banner" ></a>

    </div>
</div>
<div class="right-ad"> <a href="#"><img src="wad.jpg" alt="Right Banner" style="border-width: 0px" ></a>

</div>
<div class=wrapper>//center body part</div>

fiddle :http://fiddle.jshell.net/6w7dvbzd/

Answer 1

一个选项是将 display:table 应用于容器，并将 display:table-cell 和 vertical-align:middle 应用于子容器，如下所示:

HTML:

<div class=wrapper>
    <div class="content">Content</div>
</div>

CSS:

.wrapper {
    display: table;
}

.wrapper .content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

更新的 JS fiddle :

http://fiddle.jshell.net/6w7dvbzd/1/