Question

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

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

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

Answer 1

我通常发现设置行高有助于此。这样的事情可能有用：

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

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

祝你好运

垂直对齐浮动DIV

1 个答案: