Question

我意识到这个问题有很多这样的问题，但我找不到任何适合我需要的问题。我的模板的标题将有一个“横幅”，其中包含两个浮动的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。

您忘记了 #banner div

上的display: table;

你不需要任何漂浮物！

Answer 2

这可能不在上下文中。但我正在为那些在垂直中间对齐div s

的人们分享这个

这CSS可以帮助您

.parent-div{
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.div-that-needs-to-be-vertically-middle-aligned{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

如何垂直对齐两个div？

2 个答案: