[Solved] vertical align bottom a block grid in Zurb Foundation?

[waffl]

I am trying to vertical align a number of different sized images in Zurb Foundation using the block grid.

I have setup this jsfiddle – http://jsfiddle.net/waffl/cLc2v/1/ – and have tried setting the parent container of the li to relative and the lis themselves to position: absolute; bottom: 0; which seems to be causing the parent to collapse and thus, display the item way too high.

So amazed that vertical alignment is still an issue that perplexes me so much.

[Atelierbram]

In the near future vertical alignment will be easier to accomplish with flexbox.

http://codepen.io/atelierbram/pen/qxJjL

[Atelierbram]

@waffl Best go with the display: inline-block solution for now. Using Zurb’s block-grid classes (you can, maybe even better, also choose not to, and make your own classes) the CSS would be something like this:

ul.small-block-grid-4 li {
    float: none;
    display: inline-block;
} 
img {
    vertical-align: baseline;
    width: 100%;
    max-width: 100%;
}

Note from @wolfcry911 ‘s demo, in the HTML tab, how the closing and opening list-item brackets are ‘touching‘ </li><li>. This is for removing white-space to prevent the rounding errors that come with display: inline-block in some browsers.

[waffl]

@Atelierbram – You are my hero!!! Amazing, works perfectly, and yes thank you for highlighting the whitespace issue, that is indeed a problem without a very elegant solution as of yet unfortunately.

Thank you so much for the help, this worked perfectly.

[realph]

@waffl @Atelierbram I also ran into this problem and am using the display: inline-block solution, which aligns every image to the bottom. But for some reason, the last item in the row doesn’t show.

So, for example a small-block-grid-4 shows only 3 items in a row, rather than 4.

[waffl]

@realph did you double check the issues mentioned about whitespace causing the next item to push down due to rounding errors with ‘inline-block’?

[realph]

@waffl Ahh, that’s really strange. So I have to make sure my closing </li> and opening <li> are touching?

First I’ve ever seen of that…

[Author]

Posts