这是我的相关页面标记:
<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 这样的 block 元素。所以我正在寻找一种不同的方法来做到这一点。
我看到了 hacky display: table;
方法并尝试使用它,但它没有改变任何东西。还尝试将元素更改为内联元素,如 span
,但这也不起作用。出于某种可怕的原因,我什至尝试使用 margin: auto 0;
,但这也根本不起作用。
所以我寻求帮助。如何在标题 div 中垂直对齐此 div?
谢谢!
最佳答案
设置user_box
的行高等于header
的高度
关于css - Div 元素未在另一个 div 元素的中间对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6810257/