html - 垂直对齐使用 margin-auto 的 div 中的 div

Question

我有这个 jsfiddle:Sample

如您所见，2 个 div 并排对齐，我想要的是垂直对齐它们。我还希望能够添加另一个 div 以 float 到右侧，它也是垂直对齐的。

如何在不使用绝对定位的情况下对齐它们？

<div style="background-color: blue; ">
        <!-- Global Header -->
        <div class="header">

            <div class="floatLeft">
                <a href="" class="header-logo">WritePub</a>
            </div>

            <div id="pcontainer" class="inner-header-search floatLeft">
                <input type="text"/>
            </div>

        </div>
    </div>

Answer 1

你的 fiddle 太吵了。如果您想垂直对齐 div 的内容而不触及其高度，您可以将“display: table-cell”添加到 div 以模拟表格行列，从而使您对齐。

http://jsfiddle.net/5peh12th/2/

<div class="container">
    Hello: <input type="text-box"/>
</div>

.container {
    display: table-cell;
    width: 800px;
    background-color: red;
    height: 50px;
    vertical-align: middle;
}

或者你可以不给 div 一个高度而给顶部和底部填充相等的数字