Vertical middle align elements in 3-column layout

Ok. I've tried for hours to get this, but no luck. Here's my fiddle: http://jsfiddle.net/JE97D/3/.

Per this screenshot, I want to ve开发者_如何转开发rtically align these elements in the middle without resorting to the use of margin-top. Ideally the alignment could be made using line-height, but I haven't had luck trying to do so. This reason for this is that I can dynamically set where to align the elements when I'm using different container heights for my SASS mixin.

If I understand correctly, you want it all in the middle.

If so, make the line-height the same as the height of the div. Something like this:

#date-nav-container  {
    height: 100px;
    line-height:100px;
}

Example: http://jsfiddle.net/jasongennaro/JE97D/4/

EDIT

As per the comment...

Do this and the (This week) reappears.

.smaller{
   margin-top:-40px;
   display:inline-block;
   float:left; 
   line-height:14px; 
}

Updated: http://jsfiddle.net/jasongennaro/JE97D/6/

However, this uses margin-top, which you said you didn't want to use.