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

【问题标题】：Div element not aligning in the middle of another div elementdiv 元素未在另一个 div 元素的中间对齐
【发布时间】：2011-07-25 07:01:18
【问题描述】：

这是我的相关页面标记：

<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 的垂直中间。经过大量的谷歌搜索和实验，我了解到这并不容易。显然，我无法垂直对齐 div 之类的块元素。所以我正在寻找一种不同的方法来做到这一点。

我看到了 hacky display: table; 方法并尝试使用它，但它并没有改变任何事情。还尝试将元素更改为像span 这样的内联元素，但这也不起作用。我什至出于某种糟糕的原因尝试使用margin: auto 0;，但这也根本不起作用。

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

谢谢！

【问题讨论】：

您可能希望使用display:table-cell; 来代替vertical-align:middle; css 属性，但这种显示类型会导致很多问题。

标签： css html block vertical-alignment

【解决方案1】：

设置user_box的行高等于header的高度

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

【讨论】：

这只会使#user_box中的文本居中，而不是实际的div。见：jsfiddle.net/pyppD/1
这就是你在#user_box 中的所有内容：）

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

如您所见，我使用表格作为标题，并将相同的 id 应用于每个元素，除了两个内部 div 已更改为 td。我添加了一个内部 td 来补偿两个 div 之间的空间，因为它们最初设置为 float:left/right。

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

【讨论】：