使用CSS居中缩略图库：浮动，内联，列表，??? [英] Centering Thumbnail Galleries with CSS: Floats, Inline, Lists, ???
问题描述
嗨 - 我正在试图弄清楚如何制作照片缩略图库
页面使用CSS而没有表格（1）每个图像下面有一个标题
和（2）居中 - 这样当浏览器宽度改变时，图像
一直重新构成中心行，每行最多
图像数。
我已经在 http://www.americanstate.org/test/gal01/
说明了我的目标，以及我有多接近。我找到了两个几乎成功的策略：使用浮动属性（你可以使用
标题，但是所有的边缘对齐，而不是中心对齐）或者使用
CSS调整列表（你可以居中对齐，但你不能有字幕）。
我实际上成功地制作了一个CSS -defined缩略图库页面
带有居中的标题图片，使用display：inline属性 -
但它只适用于Windows的Internet Explorer 5.0。这表明
，我的目标是可能的。 。 。但是我希望它能够在
标准兼容的浏览器中工作。
请大家去看看我的测试页，看看他们是否可以解决
问题？谢谢！我会在那里写下任何成功并保留在
发行中。
Hi -- I''m trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.
I''ve made a test page at http://www.americanstate.org/test/gal01/ that
illustrates what I''m aiming for and how close I''ve gotten. I''ve found
two nearly successful strategies: Use the float property (you can use
captions, but everything''s edge-aligned, not center-aligned) or use
CSS-tweaked lists (you can center-align, but you can''t have captions).
I actually succeeded in producing a CSS-defined thumbnail gallery page
with centered, captioned images, using the display:inline property --
but it only works in Internet Explorer 5.0 for Windows. That suggests
that what I''m aiming for is possible . . . but I want it to work in
standards-compliant browsers, too.
Would folks go take a look at my test page and see if they can solve
the problem? Thanks! I''ll write up any success there and keep it in
circulation.
推荐答案
un ******* @ yahoo.com （Filippo Giarratano）写道：
un*******@yahoo.com (Filippo Giarratano) wrote:
你好 - 我正在试图弄清楚如何使用CSS制作照片缩略图库页面而没有表格（1）每个图像下面都有一个标题
和（2）居中 - 所以随着浏览器宽度的变化，图像
始终将自身重新组织为每行上具有最大
图像数量的居中行。
Hi -- I''m trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.
正确方法要做到这一点，就是使用css 2.1值inline-block。对于
，显示属性。 （仅限最近的Operas afaik支持）
您是否考虑过删除标题并使用title属性？
-
Spartanicus
The proper way to do this is to use the css 2.1 value "inline-block" for
the "display" property. (only supported by recent Operas afaik)
Have you considered dropping the caption and using the title attribute?
--
Spartanicus
un ******* @ yahoo.com （Filippo Giarratano）写道：
un*******@yahoo.com (Filippo Giarratano) wrote:
我实际上成功地生成了CSS定义的缩略图库页面
带有居中的字幕图像，使用显示器：内联属性 -
但它仅适用于Windows的Internet Explorer 5.0。这表明我的目标是可能的。 。 。但是我希望它也能在符合标准的浏览器中工作。
I actually succeeded in producing a CSS-defined thumbnail gallery page
with centered, captioned images, using the display:inline property --
but it only works in Internet Explorer 5.0 for Windows. That suggests
that what I''m aiming for is possible . . . but I want it to work in
standards-compliant browsers, too.
在IE中发生的是它使用你指定的宽度，这不是
符合标准的行为，因为内联
元素的宽度应该被忽略。符合标准的UA将忽略设定的宽度。
-
Spartanicus
What happens in IE is that it uses your specified width, this is not
standard compliant behaviour, as width should be ignored for inline
elements. A standard compliant UA will ignore the set width.
--
Spartanicus
在帖子中：< news：d8 ************************** @ posting.google。 com>
un*******@yahoo.com （Filippo Giarratano）说：
in post: <news:d8**************************@posting.google. com>
un*******@yahoo.com (Filippo Giarratano) said:
嗨 - 我正在试图弄清楚如何使用CSS制作照片缩略图库页面而没有表格（1）每个图像下面都有一个标题
和（2）居中 - 以便随着浏览器宽度的变化，图像
始终重新构建为每行上具有最大
图像数量的居中行。
Hi -- I''m trying to figure out how to make a photo thumbnail gallery
page using CSS and no tables that (1) has a caption below each image
and (2) is centered -- so that as browser width changes the images
consistently reconstitute themselves as centered rows with the maximum
number of images on each row.
为什么不做一些创意而不是同样的老无聊的行/列
拇指布局？
例如： http://balls.bruciesusenetshit.info/
-
brucie - 我用netnet裸
why not do something creative instead of the same old boring row/column
thumb layouts?
e.g: http://balls.bruciesusenetshit.info/
--
brucie - i usenet nude
这篇关于使用CSS居中缩略图库：浮动，内联，列表，???的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
