Twitter Bootstrap grid Vertical align bottom

Question

So I have been at this what seems forever and can't figure it out. I have a grid with content of different heights due to images, and I am trying to get them all to align bottom but have had no luck. I have tried what I have seen on here, but nope, commented in my jsfiddle

http://jsfiddle.net/qXT6K

Answer 1

Here's an updated version of your fiddle with (what I think) you want: http://jsfiddle.net/qXT6K/34/

You were on the right track with position: absolute; bottom: 0;; it's just a matter of getting the offsets right.

I have given the container div a height just to show the bottom-alignment. You do need to give it a height, otherwise with all its children absolutely positioned, it will default to 0.

To center the container div (and so have all its children appear centered), you need to use margin-left: auto and margin-right: auto (shorthand margin: 0 auto), plus a set width on the div (applied through the class span8 in my example), plus removal of the float property which is bundled into all span-classed elements. You also need padding-right: 40px to center the container's children, accounting for the margin-left: 20px which is also applied to .span-s.

Answer 2

Is this what you want? http://jsfiddle.net/UxYnV/

Update Now elements are centered: http://jsfiddle.net/UxYnV/2/