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

Question

正如您在演示中看到的那样，一旦我添加了<em>，<button>就会被替换。

我希望button在footer.

演示：http: //jsfiddle.net/chovy/5h5hc/1/

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>它按预期工作。（如果你不想在里面写任何文字，就放 一个空格。）

在这里拉小提琴。

Answer 2

您只需添加vertical-align: top到<em>否定声明的默认行为display: inline-block。 小提琴

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

像这样请添加选择float:left;器em

演示

CSS

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