Question

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

标题div中有三个元素：

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

所有三个元素都应该在标题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

更新：使用table / table-cell技巧允许vertical-align: bottom;

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

标记：

<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/

使用css将元素居中

2 个答案: