Positioning / aligning middle elements in 3-column layout

Question

Here's my current markup: http://jsfiddle.net/LcMU3/64/.

I am having issues with positioning / aligning elements in the middle column.

First, I want to vertically align the elements in the middle and also horizontally center.

Second, I want to "float" the arrows to the left and right of the "weekLabel".

Ultimately, it would look like this:

I actually did try positioning and aligning the elements in nested 3-column layout, but the main issue I have with this approach is the HTML markup gets difficult to follow with all the nested divs.

Would appreciate any help.

Answer 1

As well as a display:inline-block since a div by default is display:block

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

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