Question

正如您在演示中所看到的，一旦我添加了<em>，<button>就会被取代。

我希望button在footer中垂直居中。

HTML

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em></em>
    <button class="btn-primary">Reply</button>
</footer>

CSS

footer {
    display: block;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    padding: 0 20px;
    text-align: right;
    margin-top: 20px;
}

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
}

Answer 1

对您的HTML进行一些小改动。

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em>&nbsp;</em>
    <button class="btn-primary">Reply</button>
</footer>

向<em>添加一些文字，按预期方式工作。（如果您不想要任何文本，只需将 放入空格。）

Fiddle here.

Answer 2

请注意，请在float:left;选择器

中添加em

<强> DEMO

<强> CSS

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
    float:left;
}

Answer 3

您可以告诉他们表格如表：http://jsfiddle.net/5h5hc/12/。然后你的页脚可以像你想的那样灵活，内容将始终水平居中。

<footer>
    <div><em>an em</em><button class="btn-primary">Reply</button></div>
</footer>

的CSS：

footer {
    display:table;
    height:50px;
    border:1px solid #990000;
    width:100%;
}
footer div {
    display:table-cell;
    vertical-align:middle;
    text-align:right;
}

Answer 4

您只需将vertical-align: top添加到<em>即可取消display: inline-block声明的默认行为。 fiddle

我如何垂直居中父母中的两个元素？

4 个答案: