Question

我有这个jsfiddle：Sample

正如你所看到的，两个div并排排列在一起，我想要的是vertically aligning他们。此外，我希望能够添加另一个div向右浮动，也是垂直对齐。

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

<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

你的小提琴太吵了。如果你想垂直对齐div的内容而不触及它的高度你可以添加＆＃34; display：table-cell＆＃34;到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一个高度并给出相等数字的顶部和底部填充

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

1 个答案: