在 3 列布局中定位/对齐中间元素答案

【问题标题】：Positioning / aligning middle elements in 3-column layout在 3 列布局中定位/对齐中间元素
【发布时间】：2011-10-31 06:25:36
【问题描述】：

这是我当前的标记：http://jsfiddle.net/LcMU3/64/。

我在中间列中定位/对齐元素时遇到问题。

首先，我想将元素在中间垂直对齐，同时水平居中。

其次，我想将箭头“浮动”到“weekLabel”的左右两侧。

最终，它会是这样的：

我确实尝试过在嵌套的 3 列布局中定位和对齐元素，但这种方法的主要问题是 HTML 标记很难与所有嵌套的 div 一起使用。

不胜感激。

【问题讨论】：

在这种情况下你可以重写你的标记吗？

标签： css positioning vertical-alignment alignment

【解决方案1】：

还有一个display:inline-block，因为div默认是display:block

.weekLabel{
    display:inline-block;
    float:left;
}
.leftArrow {
    display:inline-block;
    float:left;
}

.rightArrow {
    display:inline-block;
    float:left;
}

【讨论】：

【解决方案2】：

http://jsfiddle.net/LcMU3/67/

你必须给这些元素一个 float:left;并将 text-align:center 分配给 weeklabel 以使文本居中，并分配一些边距以完成它：

.leftArrow {
    float:left
}

.rightArrow {
    float:left;
}

.weekLabel{
float:left;
text-align:center;
margin-left:10px;
margin-right:10px;
}

【讨论】：

啊，酷...为什么要三个左浮动？这解决了定位问题……对齐呢？我可以在中间 col 类上使用 line-height 吗？
左浮动不必打算在左侧放置一些东西。它只是意味着：从左到右将对象彼此相邻放置。是的，您可以使用 lineheight，但是如果您将背景放在包装器上，您可以自己轻松得多，我很快就会给您一个新的 jsfiddle 用于演示。 jsfiddle.net/LcMU3/68

【解决方案3】：

组合inline-block/vertical-align FTW：

.leftArrow,.rightArrow,.weekLabel {
    display:inline-block;
    vertical-align:middle;
}

（注意#wrapper 的宽度）

【讨论】：