CSS缩略图对齐

Question

我做了一个小画廊来展示几个缩略图。我让它用缩略图自动填充任何可用空间，以便在调整大小时工作。 问题是缩略图不居中，调整大小时右侧有多余的空间。我尝试了许多边距、填充、对齐方式等的组合，以尝试使其在其所在的行居中，但到目前为止没有一个能够工作。

这是页面： 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;
}

Answer 1

使用display: inline-block 代替float:left 可以解决问题。将.thumbcontainer 设置为text-align:center 并将.galleryitem 上的浮动角色与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;
}

Inline-block 是 not supported very well by IE 6/7，但如果这不是问题，此解决方案将在所有其他浏览器中运行良好。

Answer 2

添加“文本对齐：居中；”到您的 .galleryitem 规则

您将图像作为内联项，这意味着它们基本上表现得像文本。