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代码可能会在您的情况下派上用场：

这是一个样本

DEMO

Answer 4

您可以使用填充垂直对齐链接

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

之间遇到了一个看似冲突的问题

在我的情况下，我想要几个小图像水平排列。其中一些是垂直尺寸合适的，另一些不够高，所以我想排列那些垂直尺寸错误的垂直尺寸。

使用<ul> / <li>结构，我保留了float:left;和dispay:inline;，这在FF和IE 7,8,9中没问题，但在Chrome中不正确和Safari。出于某种原因，即使有足够的空间，最后一张图片也会进入下一行。

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

不确定为什么float:left;和vertical-align:middle;

之间存在冲突

您可能想要取消float:left;

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

5 个答案:

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