Question

这是我的相关页面标记：

<div id="header">
    <div id="logo">
        <a href="/">Home</a>
    </div>
    <div id="user_box">
        test
    </div>
</div>

我的相关CSS：

#header {
    width: 960px;
    height: 110px;
}

#logo {
    background: url('/assets/img/logo.png') no-repeat center;
    width: 300px;
    height: 110px;
    float: left;
}


#user_box {
    width: 300px;
    height: 60px;
    float: right;
    vertical-align: middle;
}

现在，我想将user_box div放在header div的垂直中间位置。经过大量的Google和实验，我了解到这并不容易。显然，我无法垂直对齐块元素，如div。所以我正在寻找一种不同的方式来做到这一点。

我看到了hacky display: table;方法并尝试使用它，但它没有改变一件事。还尝试将元素更改为内联元素，如span，但这也不起作用。我甚至尝试使用margin: auto 0;出于某种可怕的原因，而且根本不起作用。

所以我在寻求帮助。如何在我的标题div中垂直对齐此div？

谢谢！

Answer 1

将user_box的行高设置为header

的高度

工作演示：http://jsfiddle.net/AlienWebguy/pyppD/

Answer 2

垂直对齐不适用于div，用于对齐表格中的元素。在你的情况下你可以使用这个

    #user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/

Answer 3

所以我稍微调整了你的代码，这就是我得到的：http://jsfiddle.net/3k8XE/

正如你所看到的，我正在使用一个表作为标题，并对每个元素应用相同的id，除了两个内部div已经改为td。我添加了一个内部td来补偿两个div之间的空间，因为它们最初设置为float：left / right。

（当然边界只是为了显示这里实际发生的事情。）

Div元素未在另一个div元素的中间对齐

3 个答案: