【问题标题】:CSS thumbnail alignCSS缩略图对齐
【发布时间】:2011-09-25 15:11:21
【问题描述】:

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

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

【问题讨论】:

  • 附带说明,在您的 .barbody css 中您不能使用 width: 100% - 1px; 我暂时发布您的解决方案。
  • 好吧,我设置为-1来修正边框偏移

标签: css gallery thumbnails


【解决方案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,但如果这不是问题,此解决方案将在所有其他浏览器中运行良好。

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

    • 这并没有完全解决问题,右侧还有剩余空间。
    • 我之前尝试过,我添加了它,你可以看到它对图像没有任何改变
    猜你喜欢
    • 2012-02-23
    • 1970-01-01
    • 1970-01-01
    • 2023-04-02
    • 2015-10-25
    • 1970-01-01
    • 2011-12-31
    • 1970-01-01
    相关资源
    最近更新 更多