html - 如何垂直对齐两个div？

Question

我知道关于这个问题有很多这样的问题，但我找不到适合我需要的问题。我的模板的标题将有一个“横幅”，其中包含两个 float 的 div:品牌，即网站名称和口号；然后是广告。我希望我的广告与品牌垂直对齐。我已经尝试过表格显示方法，但没有任何效果。这是一个jsFiddle

HTML:

<div id="banner">
    <div class="container">
        <div id="branding">
            <h1>Site Name</h1>
            <p>Your catchy slogan goes here.</p>
        </div>
        <div id="advert">
            <div class="advert">
                <h1>Your advertisement could be here!</h1>
            </div>
        </div>
    </div>
</div>

CSS:

#banner {
    background: #C1CE96;
    padding: 0;
    margin: 0;
    width: 100%;
    display: table;
    height: 10%;
    position: relative;
}

#banner #branding {
    padding: 10px;
    float: left;
    display: table-cell;
    vertical-align: middle;
}
#banner #branding h1 {
    font-size: 1.5em;
    color: #484A47;
}
#banner #branding p {
    font-size: 1em;
}

#banner #advert {
    float: right;
    vertical-align: middle;
    display: table-cell;
}

.advert {
    width: 468px;
    height: 60px;
    background: #fff;
    border: 1px solid #484A47;
    text-align: center;
}
.advert h1 {
    font-size: 1em;
}

Answer 1

您可以使用 display: table; display: table-cell; 属性来做到这一点。
这是一个fiddle .

您忘记了 display: table; 在 #banner div

而且这里不需要任何 float !