垂直和水平對齊的元素，同時左右浮動

Question

我想將div中的四個鏈接居中。

這是我到目前為止所做的： jsfiddle

HTML：

<div id="menu">
    <section>
        <a class="top" href="#">Top</a>
        <a class="left" href="#">Left</a>
        <a class="right" href="#">Right</a>
        <a class="bottom" href="#">Bottom</a>
    </section>
</div>

CSS：

#menu {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background: #eee;
    position: relative;
    padding: 10px;
}

#menu>section {
    position: absolute;
    text-align: center;
    width: 200px;
}

#menu a {
    display: block;
    vertical-align: middle;
    height: 20px;
}

#menu .left {
    float: left;
    height: 160px;
}

#menu .right {
    float: right;
}

#menu .bottom {
    clear: both;
}

問題在於，浮動元素沒有按原樣垂直居中。 我想在left和right的元素在中間，而不是在頂部。

Answer 1

可能您可以為此使用line-height屬性。 像這樣：

#menu .left, #menu .right {
    height: 160px;
    line-height:160px;
}

http://jsfiddle.net/YdPzP/13/

Answer 2

嘗試添加

 .left, .right { line-height: 160px; }

Answer 3

既然你已經在使用html5 ，我會說aside標簽可能會派上用場，你的情況：

這是一個樣本

演示

Answer 4

我在float:left;之間遇到了看似沖突float:left; vertical-align: middle;

就我而言，我想將幾​​張小圖像水平排列。 其中一些在垂直方向上是正確的尺寸，而其他的還不夠高，所以我只想將垂直尺寸不正確的那些對齊。

使用<ul> / <li>結構，我保持float:left; 並dispay:inline; 在FF和IE 7,8,9中都可以，但在Chrome和Safari中不正確。 由於某種原因，即使有足夠的空間，最后一張圖像也會移到下一行。

消除后完全float: left; vertical-align: middle; 然后工作。 然后只是添加填充以將它們水平對齊。 現在可在所有瀏覽器中使用。

不知道為什么float:left;之間會有沖突float:left; 和vertical-align:middle;

您可能需要消除float:left;

Answer 5

您可以使用填充垂直對齊鏈接

<div id="menu">
    <section>
        <a class="top" href="#">Top</a>
        <div class="middle">
        <a class="left" href="#">Left</a>
        <a class="right" href="#">Right</a>
        </div>
        <a class="bottom" href="#">Bottom</a>
    </section>
</div>

添加以下CSS：

#menu div.middle{
    height:90px;
    padding-top:60px;

}