垂直对齐浮动 DIV答案

【问题标题】：Vertically align floating DIVs垂直对齐浮动 DIV
【发布时间】：2011-05-31 07:38:42
【问题描述】：

我正在创建的网站的一部分如下：

<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 &bull; <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;
}

实现这一目标的最佳方法是什么？

【问题讨论】：

标签： html css vertical-alignment css-float

【解决方案1】：

我通常发现在这里设置行高会有所帮助。这样的事情可能会起作用：

#topbar_left, #topbar_right {
  line-height: 20px;
}

您也可以尝试使用 vertical-align CSS 属性。阅读this article了解如何正确使用它

祝你好运

【讨论】：

谢谢，我之前读过这篇文章并尝试使用垂直对齐使其工作，但似乎没有帮助。关于行高，我不想设置明确的高度，但如果没有其他方法可以做到这一点，那么我可能会这样做。