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;
}

内联块是not supported very well by IE 6/7，但如果这不是问题，那么这个解决方案在所有其他浏览器中都可以很好地工作。

Answer 2

添加“text-align：center;”你的.galleryitem规则

你已经将图像作为内联项目，这意味着它们的行为基本上就像文本一样。

CSS缩略图对齐

2 个答案: