带有字幕的图像居中？ [英] Images with captions centered?

问题描述

你好，

我一直在努力解决这个问题一段时间，所以我虽然我会给b $ b获得一些更熟练的人的输入CSS比我好。


我实际上是想用这个完成两件事：


1.用文本创建浮动图像周围，​​标题集中在下面
。图像大小可以变化，但标题需要有一个固定大小的固定大小才能使其正确打破。当浏览器宽度变得非常小时，我还需要图像来自动调整大小，使用

''max-width''属性，这就是问题所在，因为Firefox

似乎不接受max-width属性并处理它像

图像不存在或非常小。它的效果与预期的MSIE 6和

Opera 8相同。


2.灵感来自A List Apart一文（见下文[1] ），我正在尝试

创建一种流畅的方式来显示带有字幕的图像，但是带有图像 -

显示*居中*并且可能有不同的图像尺寸（ALA

有固定的图像尺寸）。我尝试了很多不同的解决方案，但是最近

尝试使用''display：image-block''从CSS 2.1

标准判断应该是要走的路，它在Opera中完美运行，但

在FF和MSIE中完全失败，只显示在

其他下方的图像。


我知道第一个问题可以通过不使用max-width来解决，但是我确实希望它可以使用它。我猜Opera是唯一一款支持动态调整图像大小的浏览器，这是正确的吗？


至于第二个问题，我的猜测是使用另一个解决方案而不是

inline-block会解决它但我已经尝试过显示：阻止和不同的

包装类。漂浮到左边就可以了，但我真的希望

图像居中，而不是左边。


是否有符合标准的方法来实现这一点在Opera，FF

和MSIE工作？


我在这里为这两个问题创建了一个测试用例：
http://stian.freeshell.org/test/float/float.html


有人可以看看这个，并给我一些提示，我可以做些什么来解决问题或改进我正在使用的方法？


reagards，

Stian


链接：

[1] < a rel =nofollowhref =http://www.alistapart.com/articles/practicalcss/target =_ blank> http://www.alistapart.com/articles/practicalcss/

Hello,
I''ve been struggling with this problem for a while now, so I though I''d
get some input from anyone more skilled with CSS than I am.

I''m actually trying to accomplish two things with this:

1. Create a floated image with text around, with a caption centered
underneath. Image size can be varied but the caption needs to have a
fixed size to make it break correctly I think. I also need the image to
resize automatically when the browsers width gets very small, using the
''max-width'' attribute, and this is where the problem lies, since Firefox
does not seem to accept the max-width attribute and handles it like the
image is non-existent or very small. It works like expected in MSIE 6 and
Opera 8.

2. Inspired by a ''A List Apart'' article (see [1] below), I''m trying to
create a fluid way to display images with captions, but with the image-
display *centered* and with the possibility of different image sizes (ALA
had fixed image sizes). I''ve tried many different solutions but recently
tried using ''display: image-block'' which judging from the CSS 2.1
standard should be the way to go, and it works perfectly in Opera but
fails totally in FF and MSIE, who just displays the images one below the
other.

I know the first problem can be fixed by not using max-width but I''d
really like to have it work with it. I guess Opera is the only browser
supporting on-the-fly resizing of images this way, is this correct?

As to the second problem, my guess is that using another solution than
inline-block would solve it but I''ve tried display:block and different
wrapper classes. Floating to the left would do it but I really want the
images centered, not to the left.

Is there a standards-compliant way to make this work in both Opera, FF
and MSIE?

I have created a test case for both problems here:
http://stian.freeshell.org/test/float/float.html

Could someone please have a look at this and give me some hints to what I
can do to fix the problems or improve the methods I''m using?

reagards,
Stian

links:
[1] http://www.alistapart.com/articles/practicalcss/

推荐答案

Stian Lund写道：

Stian Lund wrote:

你好，


你好:-)

我一直都很好暂时解决这个问题一段时间了，所以我虽然会得到一些比我更熟练的CSS的人的一些意见。

我其实想要完成两个与此相关的事情：

1.创建一个带有文本的浮动图像，下面有一个中心的标题。图像大小可以变化，但标题需要有一个固定的大小，以使其正确打破我认为。当浏览器宽度变得非常小时，我还需要图像自动调整大小，使用
''max-width''属性，这就是问题所在，因为Firefox
似乎不接受max-width属性并处理它像
图像不存在或非常小。它与MSIE 6和Opera 8中的预期效果相似。

2.受到A List Apart一文的启发（见下文[1]），我正在尝试
创建一种流畅的方式来显示带有字幕的图像，但图像 -
显示*居中*并且可能有不同的图像尺寸（ALA
具有固定的图像尺寸）。我尝试了很多不同的解决方案但是最近尝试使用''display：image-block''从CSS 2.1
标准判断应该是要走的路，它在Opera中完美运行但是
完全失败了FF和MSIE，他们只是在
其他下方显示图像。

我知道第一个问题可以通过不使用max-width来修复但是我' 'd
非常想让它与它一起工作。我猜Opera是唯一支持动态调整图像大小的浏览器，这是正确的吗？


我不确定最大宽度是否与我在下面给出的

示例结合使用，但我对此感兴趣结果当你尝试

out out。

关于第二个问题，我的猜测是使用另一个解决方案而不是
内联块会解决它但是我'尝试过显示：块和不同的
包装类。向左浮动会做到这一点，但我真的希望
图像居中，而不是向左。

是否有符合标准的方法使这个工作在Opera，FF
和MSIE？

我在这里为这两个问题创建了一个测试用例：
http://stian.freeshell.org/test/float/float.html

有人可以看看这个和给我一些提示，我可以做些什么来解决问题或改进我正在使用的方法？
[...] [1] http：//www.alistapart .com / articles / practicalcss /

随意仔细检查代码：

http://locusmeus.com/test/thumbswith...scentered.html

表的原因是我有不同高度的图像，

我想要每行垂直居中。


-

Els http://locusoptimus.com/

Sonhos vem。 Sonhos v？£。 O resto ??瑕疵。

- Renato Russo -

现在播放：Juicy Lucy - 你喜欢谁？

Feel free to scrutinize the code:

http://locusmeus.com/test/thumbswith...scentered.html

The reason for the tables is that I had images of different heights,
which I wanted vertically centered per row.

--
Els http://locusoptimus.com/
Sonhos vem. Sonhos v?￡o. O resto ?? imperfeito.
- Renato Russo -
Now playing: Juicy Lucy - Who Do You Love?

Stian Lund < ST *************** @ operamail.com>写道：

Stian Lund <st***************@operamail.com> wrote:

2。灵感来自A List Apart的文章（见下面的[1]），我试图创建一种流畅的方式来显示带有字幕的图像，但是带有图像 -
显示*居中*

http：//www.spartanicus。 utvinternet.i ... h_captions.htm

并且可能有不同的图像尺寸

2. Inspired by a ''A List Apart'' article (see [1] below), I''m trying to
create a fluid way to display images with captions, but with the image-
display *centered*
http://www.spartanicus.utvinternet.i...h_captions.htm
and with the possibility of different image sizes

你将拥有指定每个包装的宽度。


-

Spartanicus

You''ll have to specify a width for each wrapper.

--
Spartanicus

Spartanicus< in *****@invalid.invalid>写在

新闻：pd ******************************** @ news.spart anicus .utvinternet.ie：

Spartanicus <in*****@invalid.invalid> wrote in
news:pd********************************@news.spart anicus.utvinternet.ie:

http：//www.spartanicus .utvinternet.i ... ery_with_capti
ons.htm

http://www.spartanicus.utvinternet.i...ery_with_capti
ons.htm

感谢指针，一个非常好的解决方案，虽然可能不是

''intuituve''作为ALA之一。但是，我宁愿不必在img标签中指定

宽度，而''＃gallery span''中的宽度是可以的，因为

它控制字幕包装，这很重要。


我尝试删除宽度和高度属性并插入一些

更大的图像（250 + 300px） - 它似乎仍然在Firefox中很好地工作和

MSIE，但是Opera坚持要将图像叠加在一起，如果它们的价格比较大...... grr：/

从#gallery中删除''display：inline-block''解决了这个

幸运:)，但我不知道这可能导致什么问题

其他浏览器，因为我只有FF，MSIE和Opera。此外，标题是

不在MSIE中的图像中心。


示例：
http://stian.freeshell.org/test/float/spartanicus.htm


我知道它看起来不是很好，但它更接近我想要的b $ b ...


其他任何想法或提示？


Stian

Thanks for the pointer, a very good solution, although maybe not as
''intuituve'' as the ALA one. However, I would rather not have to specify
the width in the img tag, while the width in ''#gallery span'' is ok since
it controls the captions wrapping, which is important.

I tried removing the width and height attributes and inserting some
larger images (250+300px) -- it still seems to work nicely in Firefox and
MSIE, but Opera insists on layering the images over each other if they
are larger... grr :/

Removing ''display: inline-block'' from #gallery span solves this
fortunately :), but I don''t know what problems this might cause with
other browsers since I only have FF, MSIE and Opera. Also, the caption is
not centered under the image in MSIE.

Example:
http://stian.freeshell.org/test/float/spartanicus.htm

I''m aware it doesn''t look very good, but it''s a bit closer to what I
wanted...

Any other ideas or tips?

Stian

这篇关于带有字幕的图像居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！