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.

Say the Div height is 100px and the image height is 20px. So 3 images with 20px would sum up to 60px. The remaining 40px should evenly get distributed as padding between the images.

Similarly when another image is added, the remaining 20px should be total padding between all images.

The property : vertical-align: middle is not working here.

Answer 1

You want to:

1. set the div to display:table with a fixed height,
2. wrap each <img> 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:

<ul id="img-list">
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>​

#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 }​