Evenly distribute images vertically within fixed-height space

Question

I have 3 images vertically aligned in fixed height div. How can I make sure that the top and bottom padding between them remains even when an image is added or deleted.

Answer 1

You want to:

1. set the div to display:table with a fixed height,
2. wrap each in element with display:table-row and display:table-cell
3. set the images to display:block
4. set the table-cell elements to vertical-align:middle
5. set the height of the first and last rows to be exactly as tall as the images themselves

This will cause the space to be evenly distributed vertically.

Demo: http://jsfiddle.net/X2URZ/2/

Code:

  

  

  

​

#img-list { display:table; height:100px }
#img-list img { height:20px; display:block }
#img-list li { display:table-row }
#img-list li span { display:table-cell; vertical-align:middle; background:red }
#img-list li:first-child,
#img-list li:last-child { height:20px }​