CSS 在 2 个浮动 div 中垂直居中答案

【问题标题】：CSS center vertically in 2 floated divsCSS 在 2 个浮动 div 中垂直居中
【发布时间】：2012-06-06 03:53:44
【问题描述】：

我有一个带有 2 个浮动 div 的 div。
段落中左侧 3 个按钮和右侧链接，单行。
当右侧的链接变长（或者我决定使用更多按钮）时，段落变为多行，我希望我的按钮垂直居中。

在我的示例中，粗体名称“Joe Smith”可以正常工作，但如果变为“Joe Smith Brown Jones”，我需要将按钮居中。 See an example here

CSS：

body { color: #CCCCCC; font-family: 'Lucida Grande', 'Trebuchet MS'; font-size: 100%; }
a, a:link, a:visited, a:focus { color:#4188FB; }
a:active, a:hover { color:#FFCC00; }
.clearboth { clear:both; }

/* header */
.admin-header {
    width: 700px;
    padding: 15px 10px;
    background: #505050;
}
.admin-header-left {
    float: left;
}
.admin-header-right {
    margin-right: 0px;
}
.admin-header-right p {
    text-align: right;
    line-height: 150%;
}

/* buttons */
a.nav-btn, a.nav-btn:link, a.nav-btn:visited, a.nav-btn:focus { padding: 5px 15px; margin-right: 2px; text-decoration: none; color: white; background-color: #4188FB; }
a.nav-btn:active, a.nav-btn:hover { color: white; background-color: #FFCC00; }

.rounded-left { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -opera-border-radius: 5px 0 0 5px; -khtml-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
.rounded-right { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -opera-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }

HTML：

<div class="admin-header">
    <div class="admin-header-left">
        <a class="nav-btn rounded-left" href="#">New Order</a><a class="nav-btn" href="#">Invoices</a><a class="nav-btn rounded-right" href="#">Portfolio</a>
    </div>
    <div class="admin-header-right">
        <p>Hello <b>Joe Smith Brown Jones</b> | <a href='#'>account</a> | <a href='#'>settings</a> | <a href='#'>help</a> | <a href='#'>exit</a></p>
    </div>
    <div class='clearboth'></div>
</div>

【问题讨论】：

标签： css html css-float vertical-alignment

【解决方案1】：

你可以试试：

显示：表格、表格行、表格单元格

在这种情况下，您将能够使用垂直对齐属性：

您可以在此处查看更新的示例：http://jsfiddle.net/HPKTa/1/

不幸的是，这在 IE6 中不起作用。在 IE6 的情况下，您可以使用 javascript 定位按钮。

【讨论】：

【解决方案2】：

你必须玩一点这个 CSS 属性

display:table-cell; vertical-align:middle;

【讨论】：