垂直对齐浮动 DIV
我正在创建的网站的一部分如下：
<div id="topbar">
<div id="topbar_left">
<form action="Search" method="POST">
<label for="searchtext">Find Products: </label><input type="text" name="searchtext" id="searchtext" size="30" />
<input type="submit" value="Search" />
</form>
</div>
<div id="topbar_right">
You are logged in as Username • <a href="LogOut">Log Out</a>
</div>
<div class="clear"></div>
</div>
我希望 topbar_right 中的文本与 topbar_left 中的文本垂直居中。但是，topbar_right并不总是包含文本，它还可以包含一个小表单，该表单显示良好，因为它与左侧的高度相同。
这是我当前的 CSS：
#topbar {
background-color: #5a87bf;
padding: 10px 30px 10px 30px;
margin-bottom: 10px;
font-size: 9pt;
}
#topbar_left {
float: left;
}
#topbar_right {
float: right;
}
.clear {
clear: both;
}
实现此目标的最佳方法是什么？
I have a portion of a website I am creating that is as follows:
<div id="topbar">
<div id="topbar_left">
<form action="Search" method="POST">
<label for="searchtext">Find Products: </label><input type="text" name="searchtext" id="searchtext" size="30" />
<input type="submit" value="Search" />
</form>
</div>
<div id="topbar_right">
You are logged in as Username • <a href="LogOut">Log Out</a>
</div>
<div class="clear"></div>
</div>
I would like for the text in topbar_right to be vertically centered to that in topbar_left. However, topbar_right doesn't always contain text, it also can also contain a small form, which displays fine because it is the same height as the one on the left.
Here is my current CSS:
#topbar {
background-color: #5a87bf;
padding: 10px 30px 10px 30px;
margin-bottom: 10px;
font-size: 9pt;
}
#topbar_left {
float: left;
}
#topbar_right {
float: right;
}
.clear {
clear: both;
}
What is the best way to go about achieving this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我通常发现设置行高在这里很有帮助。
像这样的东西可能会起作用：
您还可以尝试摆弄 vertical-align CSS 属性。阅读这篇文章了解如何正确使用它
祝你好运
I generally find that setting the line-height helps here.
something like this might work:
You can also try fiddling around with the vertical-align CSS property. Read this article about how to use it properly
good luck