使用 css 使元素居中

Question

我正在尝试正确对齐网页头部的元素。

在标题 div 中放置了三个元素：

1. 包含在锚标记中的网站徽标（作为图像）应左对齐。
2. 一个 div，其中包含一组右对齐的垂直对齐菜单元素。
3. 包含搜索框和执行按钮的表单。这必须在页面中水平居中，并显示在左侧的徽标和右侧的菜单项之间。

所有三个元素都应该对齐到标题 div 的底部。

我一直在努力解决这个问题，但似乎没有任何效果。你能帮忙吗？谢谢！

Answer 1

<div style="float: right;">
    <ul>
        <li>Menu item</li>
    </ul>
</div>
<div style="float: left;">
    <a href="/"><img style="border: 0;" src="something.png" /></a>
</div>
<div style="width: 300px; margin: 0 auto;">
    Search box
</div>

只是一个快速的模型。

Answer 2

更新：使用表格/表格单元技巧来允许vertical-align: bottom;

您需要使用 display: table-cell; css 规则将您的手册、徽标和搜索框包装到 <div> 中。

标记：

<div class="table header">
    <div class="table-cell">
        <div class="logo">&nbsp;</div>
    </div>
    <div class="table-cell">
        <div class="searchbox">&nbsp;</div>
    </div>
    <div class="table-cell">
        <div class="menu">&nbsp;<br/><br/><br/><br/><br/><br/><br/><br/></div>
    </div>
</div>

和css：

.table {
    display: table; /* our outer contaner should behave like table; */
    width: 100%;    /* set width to 100% */
}
.table-cell {
    display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
    vertical-align: bottom; /* align all elements vertical */
    background: yellow; /* for debug purposes */
}
.logo {
    float: left;
    width: 100px;
    background: green;
}
.menu {
    float: right;
    width: 100px;
    background: red;
}
.searchbox {
    margin: 0 auto;
    width: 100px;
    background: blue;
}

完整示例：http://jsfiddle.net/EREmH/4/