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

【问题标题】：Vertically and horizontally aligned elements while floating left and right左右浮动时垂直和水平对齐的元素
【发布时间】：2018-08-29 18:10:20
【问题描述】：

我想将四个链接放在一个 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 元素位于中间而不是顶部。

【问题讨论】：

标签： html css positioning alignment

【解决方案1】：

也许您可以为此使用line-height 属性。像这样：

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

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

【讨论】：

【解决方案2】：

尝试添加

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

【讨论】：

【解决方案3】：

既然你已经在使用html5，我想说aside标签在你的情况下可能会派上用场：

这是一个示例

DEMO

【讨论】：

有趣，这对我来说是新的

【解决方案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;

}

【讨论】：

【解决方案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;

【讨论】：