This will be a demo site called "art demo." Trying an all CSS layout is tricky here. Worse than differences in image sizes, is great variations in their "aspect ratios."

Demo Artist

watercolors

Floral

Scenes

Illustration

For this layout, we used :

#container { color:#42557a; background:#fff; width: 900px; margin: auto; text-align: center; padding: 0; border: 0; position: relative; overflow: hidden; }

.picbox { margin: 0; text-align: center; padding: 0; border:0; position: relative; float: left; width:300px; color:#000; background: #fff; display: table-cell; vertical-align: middle; horizontal-align: center; }

.picbox img { display: block; width: 85%; height: auto; margin: auto; padding:2px; }

.picbox p { display: table-cell; width: 100%; text-align:center;}

.picbox p + p { display: table-caption; caption-side: top; }

This sample demo page is indexCSS.html#top. See also index.htm (which features a Javascript slideshow), indexTable.html (experimenting with image sizing and positioning), and index.html (another CSS layout).