CSS


How to center a thumbnail image using CSS

Use this trick to create a good looking thumbnail gallery where all the images are displayed at the same size without distortion. The sample code below is from this useful tutorial http://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/ . Determine the image height and width to calculate the offset so the image will be centered.

<div style="width: 150px; height: 150px; border: thick solid #666666; overflow: hidden; position: relative;">
    <img src="tanahlot.jpg" style="position: absolute; left:-37px; width:225px; height: 150px;"/>
</div>