Question

I made a small gallery to show a couple thumbnails. I got it to automatically fill any available space with a thumbnail so it works when resizing.
The issue is that the thumbnails dont stay centered, there’s a trailing excess space on the right when resizing. Ive tried many combinations of margins, padding, alignments, and more to try and get it centered for the row that its on, and none are able to work so far.

here is the page:
http://segnosis.net/demo.html

This is the relevant css:

/*contains all the thumbnail items*/
.thumbcontainer
{

}

/*thumbnail image container*/
.galleryitem
{
width:150px;
height:200px;
margin-left:20px;
margin-right:20px;
float:left;
}

.thumbname
{
text-align:center;
color:#2C3635;
font-family:verdana,sans-serif;
font-size:12px;
line-height:14px;
}

Answer 1

Using display: inline-block instead of float:left can solve the problem. Set your .thumbcontainer to text-align:center and swap the float role on .galleryitem with display:inline-block, like so:

/*contains all the thumbnail items*/
.thumbcontainer
{
text-align:center;
}

/*thumbnail image container*/
.galleryitem
{
width:150px;
height:200px;
margin-left:20px;
margin-right:20px;
display:inline-block;
}

Inline-block is not supported very well by IE 6/7, but if that’s not a problem this solution will work nicely in all other browsers.