css - 親の 2 つの要素を垂直方向に中央揃えにするにはどうすればよいですか?

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

テーブルのように動作するように指示できます: 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 3

このように、セレクターに追加float:left;してくださいem

デモ

CSS

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