垂直和水平对齐的元素，同时左右浮动

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;

}