垂直对齐浮动DIV [英] Vertically align floating DIVs

问题描述

我创建的网站的一部分，如下所示：

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 &bull; <a href="LogOut">Log Out</a>
    </div>
    <div class="clear"></div>
</div>

我希望 topbar_right 中的文本垂直居中在 topbar_left 中。不过， topbar_right 并不总是包含文字，也可以包含一个小型表单，因为它的高度与左边的相同。

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.

这是我当前的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?

推荐答案

我通常发现设置line-height有助于这里。
这样的东西可能工作：

I generally find that setting the line-height helps here. something like this might work:

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

您也可以尝试使用 vertical-align CSS属性。请阅读本文如何正确使用它

You can also try fiddling around with the vertical-align CSS property. Read this article about how to use it properly

祝你好运

这篇关于垂直对齐浮动DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！