图形标签中图形标签的居中和对齐宽度 [英] Centering and aligning width of figcaption tag on image in figure tag

问题描述

我花了两天时间尝试解决无花果/无花果问题，无济于事。

I've spent two days now attempting to resolve a fig/figcation issue to no avail.

我有一个Django应用程序，用户可以提交图像和我正在使用图形和figcaption标签来显示带有附图标题的图像。主要问题是字幕宽度超过图片宽度。

I have a Django application where users are able to submit images and I'm using the figure and figcaption tags to display the image with an accompanying caption. The main issue is that the caption width exceeds the picture width.

我试图找出一种使图像保持相同尺寸的方式，并且标题相应地排列在宽度上。我也在使用Twitter-Bootstrap。我对所有解决方案都开放。任何输入，经验或建议非常感谢。

I'm trying to figure out a way for the image to remain the same size and the caption to line up in width accordingly. I'm using Twitter-Bootstrap as well. I'm open to all solutions. Any input, experience or advice greatly appreciated.

UPDATED：这是实际的HTML模板代码和CSS：

UPDATED: This is the actual HTML template code and CSS:

        <div class="span4 offset2">
                {% if story.pic %}
                    <h2>Image</h2> 
                    <figure width="{{story.pic.width_field}}">
                    <img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
                    {% 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;}

推荐答案

原始解决方案

Original Solution

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 */
}

关键是设置一些 c c 元素，如果可以的话，它会保持它和文本的约束。

The key is to set some kind of max-width for the img on the figure element if you can, then it will keep both it and the text constrained.

查看示例小提琴。

首先，这个< figure width ={{story.pic.width_field}}> 应该是这个< figure style =宽度：{{story.pic.width_field}};> 。

First, this <figure width="{{story.pic.width_field}}"> should be this <figure style="width: {{story.pic.width_field}};">.

其次，仅执行 css（$ code> img 或 figcaption ; 见小提琴）：

Second, do only this css (nothing else needed for img or figcaption; see fiddle):

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

真正的小图像与长文本仍然会有问题，作为这个小提琴显示。要使它至少看起来很干净，你可以检查一些最小尺寸的 img ，如果它太小（比如说，$ code> 100px ），而不是在图上设置 width set min-width 到 img 大小，并将最大宽度设置为阈值 100px 像这个小提琴演示。

Really small images with long text are still going to have issues, as this fiddle shows. To make it at least look clean, you might check for some minimum size of the img and if it too small (say, 100px), then instead of setting width on the figure set min-width to the img size and set a max-width to your threshold of 100px like this fiddle shows.

这篇关于图形标签中图形标签的居中和对齐宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！