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

Question

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

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

首先，我想将元素垂直居中对齐，并水平居中。

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

最终，它看起来像这样：

我实际上尝试过定位和对齐嵌套 3 列中的元素布局，但这种方法的主要问题是 HTML 标记很难遵循所有嵌套的 div。

将不胜感激任何帮助。

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

Answer 2

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

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

.leftArrow {
    float:left
}

.rightArrow {
    float:left;
}

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

Answer 3

组合inline-block/vertical-align FTW：（

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

注意#wrapper的宽度）