Last Updated: July 01, 2016
·
10.55K
· iancrowther

Horizontal & vertical align with dynamic height

Using block level elements such as div's to structure your markup, you can use css display:table && display:table-cell to make the markup behave like a table. This will allow you to vertically align images in a way that allows you to have a dynamic height.

Check out the following link for browser support

Browser Support
http://caniuse.com/#feat=css-table

Example
http://jsfiddle.net/iancrowther/QzNpZ/

4 Responses
Add your response

Hi! Can you make an example, to experiment with, please?

over 1 year ago ·
over 1 year ago ·

There's a super-awesome method using inline-block and a :before element that allows vertical alignment of an unknown height in its container with no extra markup, too. More at: http://css-tricks.com/centering-in-the-unknown/ .

over 1 year ago ·

Thanks!

over 1 year ago ·