CSS 缩略图对齐

发布于 2024-11-18 04:48:17 字数 582 浏览 4 评论 0原文

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

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏夜暖风 2024-11-25 04:48:17

使用display: inline-block代替float:left可以解决这个问题。将 .thumbcontainer 设置为 text-align:center 并将 .galleryitem 上的浮动角色与 display:inline-block 交换code>，如下所示：

/*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 IE 6/7 不太支持，但如果这不是问题的话该解决方案在所有其他浏览器中都能很好地工作。

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.

回复收藏 0 原文