div 元素未在另一个 div 元素中间对齐
这是我的相关页面标记：
<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？
谢谢！
This is my relevant page markup:
<div id="header">
<div id="logo">
<a href="/">Home</a>
</div>
<div id="user_box">
test
</div>
</div>
And my relevant 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;
}
Now, I want to position the user_box div in the vertical middle of the header div. After a lot of Google'ing and experimenting, I have learned that this isn't easy. Apparently, I can't vertical align a block element such as a div. So I'm looking for a different way to do this.
I saw the hacky display: table; method and tried using it, but it didn't change a thing. Also tried changing the element to an inline element like a span, but that didn't work either. I even tried using margin: auto 0; for some god awful reason, and that also didn't work at all.
So I'm asking for help. How do I vertically align this div inside my header div?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将
user_box的 line-height 设置为header的高度工作演示：http://jsfiddle.net/AlienWebguy/pyppD/
Set the line-height of
user_boxequal to the height ofheaderWorking demo: http://jsfiddle.net/AlienWebguy/pyppD/
垂直对齐不适用于 div，它用于对齐表格中的元素。在你的情况下，你可以使用这个
vertical align doesn't work with divs its for aligning elements in tables. In your case you could just use this
所以我稍微摆弄了你的代码，这就是我得到的： http://jsfiddle.net/3k8XE/< /a>
如您所见，我使用表格作为标题，并对每个元素应用相同的 id，但两个内部 div 已更改为 td。我添加了一个内部 td 来补偿两个 div 之间的空间，因为它们最初设置为 float:left/right。
（当然，边框只是为了显示这里实际发生的情况。）
So I fiddled around with your code a little bit, and here's what I got: http://jsfiddle.net/3k8XE/
As you can see I'm using a table as the header, and applying the same id to each element, except the two inner divs have changed to td's. I've added an inner td to compensate the space between the two divs since they were originally set to float:left/right.
(Of course the borders are just to show what's actually going on here.)