图标签中图像上的figcaption标签的居中和对齐宽度

Posted 2023-02-24

【中文标题】图标签中图像上的figcaption标签的居中和对齐宽度

【英文标题】：Centering and aligning width of figcaption tag on image in figure tag

【发布时间】：2012-07-12 16:32:24

【问题描述】：

我现在花了两天时间试图解决无花果/无花果问题。

我有一个 Django 应用程序，用户可以在其中提交图像，并且我使用 figure 和 figcaption 标签来显示带有标题的图像。主要问题是标题宽度超过了图片宽度。

我正在尝试找出一种方法，让图像保持相同的大小，并使标题相应地在宽度上对齐。我也在使用 Twitter-Bootstrap。我对所有解决方案持开放态度。非常感谢任何意见、经验或建议。

更新：这是实际的 html 模板代码和 CSS：

        <div class="span4 offset2">
                % if story.pic %
                    <h2>Image</h2> 
                    <figure >
                    <img class="image"src=" story.pic.url "  />
                    % if story.caption %
                        <figcaption>
                                                story.caption
                        </figcaption>
                    % endif %
                    </figure>
                % endif %
        </div>


 image height:auto;

 figure margin:0; display:table; 

figcaption display:table-row;
max-width: 30%;
font-weight: bold;

【问题讨论】：

您是否将img 设置为百分比width？或者您是否在没有任何 width 设置的情况下离开它？我猜你将img 设置为width: 100%。

【参考方案1】：

在 HTML5 中，事情非常简单：

HTML

<figure>
    <img src="..." >
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="..." >
    <figcaption>Caption 2</figcaption>
</figure>

CSS

figure
  display: inline-block;


/* optional, use as required */
figcaption  
  max-width: 30%;
  caption-side: bottom;

【参考方案2】：

解决这个问题的方法是使用 TABLE 和 TABLECAPTION。 就两行代码。

您可以在网站上看到此解决方案的实时预览： http://www.sandrasen.de/projektgebiete/kienheide/

figure  
  display: table; 


figcaption  
  display: table-caption; /* aligns size to the table of the figure
  caption-side: bottom /* makes the caption appear underneath the image/figure */

【参考方案3】：

原方案

figure .image 
    width: 100%;


figure 
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */

如果可以的话，关键是在figure 元素上为img 设置某种max-width，然后它会同时保持它和文本的约束。

See an example fiddle.

如果您以编程方式读取宽度

首先，这个<figure width="story.pic.width_field"> 应该是这个<figure style="width: story.pic.width_field;">。

其次，只做这个 css（img 或 figcaption；see fiddle 不需要其他任何东西）：

figure 
    text-align: center;
    margin: 10px auto; /* not needed unless you want centered */

带有长文本的非常小的图像仍然会出现问题，as this fiddle shows。为了使它至少看起来干净，您可以检查img 的一些最小尺寸，如果它太小（比如100px），那么不要在figure 上设置width，而是将min-width 设置为img 大小并将max-width 设置为100px 的阈值，例如this fiddle shows。

【讨论】：

好的。我添加了最大宽度为 50% 的设置，只是为了看看。图像大小为 div 的宽度，这有点用。文本终于换行了。但是较小的图像会远远超出其原始大小（我认为这与图形 .image CSS 有关。有什么方法可以保持实际比例一致？我不确定 max-width 的百分比差异到底是多少。好的答案，否则。

还有，图。 100% 的图像可防止出现新上传的图像。这么奇怪。删除它会再次显示这些。

@WhyNot--您不必使用百分比max-width。您可以设置像素数量。不确定您的情况，但理想情况下，如果 you could problematically get the image width 那么您可以直接在 figure 上设置 width 与 style 属性内联，并从css。 figure 上的 width 或 max-width 可以使 figcaption 的大小与 img 相同或更小，这是您想要的。

我根据您的建议更新了上面的代码。标题仍然不能正确环绕小于 div 宽度的图片。太令人沮丧了。现在已经大约 9 小时了。

@WhyNot--我不确定你的意思是“图片小于 div 的宽度”不应该出现，因为你将两者的宽度设置为相同。但是，它可能是您正在设置的display: table，此方法将不再需要它。查看我对答案的更新。