以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/

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

.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的宽度）