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

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

您可以使用 padding 垂直对齐链接，

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

}

Answer 5

我遇到了 float:left; 和 vertical-align: middle; 之间的冲突。

在我的例子中，我希望几个小图像水平排列。其中一些垂直尺寸正确，而另一些则不够高，所以我想将那些垂直尺寸错误的垂直排列。

使用

/
• 结构，我保留了 float:left; 和 dispay:inline; 在 FF 和 IE 7,8,9 中没问题，但在 Chrome 和 Safari 中不正确。由于某种原因，最后一张图像转到了下一行，尽管有足够的空间。

完全消除 float: left; 后，vertical-align: middle; 就可以工作了。然后只是添加填充以使它们水平排列。现在适用于所有浏览器。

不确定为什么 float:left; 和 vertical-align:middle; 之间存在冲突，

您可能想尝试消除 float:left;代码>