我制作了一个小画廊来展示一些缩略图。我让它自动用缩略图填充任何可用空间，以便在调整大小时起作用。 问题是缩略图不居中，调整大小时右侧有尾部多余空间。我尝试了许多边距、填充、对齐方式等的组合，试图让它在其所在的行中居中，但到目前为止，没有一个能够起作用。
这是页面: http://segnosis.net/demo.html
这是相关的 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;
}
最佳答案
使用display: inline-block代替float:left可以解决问题。将您的 .thumbcontainer 设置为 text-align:center 并将 .galleryitem 上的 float Angular 色替换为 display:inline-block，像这样:
/*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;
}
行内 block 是 not supported very well by IE 6/7 ，但如果这不是问题，则此解决方案将在所有其他浏览器中很好地工作。
关于CSS 缩略图对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6529230/