在我的母版页上，顶部，居中对齐3个div

Question

我只是想让3个div坐在上面而不会浪费太多空间。 一个div只是一个徽标图像，另一个是搜索框，最后右边的div只是一个登录/注销控件。

我的css非常差，而且我已经尝试将第一个div和最右边的div向右浮动并将搜索栏保持在中间但看起来不正确。这是我的HTML：

<div id="main">
        <div id="maia-header-logo" class="float-left;">
        </div>
        <div id="searchbox">
                <input runat="server" id="search" type="text" placeholder="Type here..." />
                <input runat="server" id="submit" type="submit" value="Search" />
        </div>
        <div class="float-right">
                <section id="login">
                    <asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled">
                        <LoggedInTemplate>
                            <p>
                                Hello, <a id="hlManageAccount" runat="server" class="username" href="#" title="Manage your account">
                                    <asp:LoginName ID="LoginName1" runat="server" CssClass="username" /></a> | <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
                            </p>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </section>
         </div>
    </div>    

结果：

Answer 1

如果你定义了宽度，它们都应该位于顶部。

否则，您可以创建一个固定宽度的容器，将其设置为position: relative;，然后将顶部栏放置在相对位置，

#header-container {
    position:relative;
    width: 1000px;
    margin: auto; }
#maia-header-logo {
    position: relative;
    top: 0;
    left: 0; }
#searchbox { 
    width: 500px; /* exact width of element */
    position: relative;
    top: 0;
    left: 250px; /* (containerWidth - elementWidth) / 2 */ }
#login {
    width: 250px;
    text-align: right;
    left: 750px; }

由于我没有为您的网站准确测量，我无法为您做数学计算，但方程式很简单。