Html 图标签中图像上figcaption标签的居中和对齐宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11460066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering and aligning width of figcaption tag on image in figure tag
提问by Why Not
I've spent two days now attempting to resolve a fig/figcation issue to no avail.
我花了两天时间试图解决无花果/无花果问题，但无济于事。
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.
我有一个 Django 应用程序，用户可以在其中提交图像，我正在使用 figure 和 figcaption 标签来显示带有标题的图像。主要问题是字幕宽度超过图片宽度。
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.
我试图找出一种方法，使图像保持相同的大小，并使标题的宽度相应地对齐。我也在使用 Twitter-Bootstrap。我对所有解决方案持开放态度。非常感谢任何输入、经验或建议。
UPDATED: This is the actual HTML template code and CSS:
更新：这是实际的 HTML 模板代码和 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;}
采纳答案by ScottS
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 */
}
The key is to set some kind of max-widthfor the imgon the figureelement if you can, then it will keep both it and the text constrained.
关键是要建立某种max-width对img上figure元素，如果你可以的话，那将保持它和约束的文本。
If You are Programmatically Reading the Width
如果您以编程方式读取宽度
First, this <figure width="{{story.pic.width_field}}">should be this <figure style="width: {{story.pic.width_field}};">.
首先，这<figure width="{{story.pic.width_field}}">应该是这个<figure style="width: {{story.pic.width_field}};">。
Second, do onlythis css (nothing else needed for imgor figcaption; see fiddle):
其次，只做这个 css（imgor不需要其他东西figcaption；见 fiddle）：
figure {
text-align: center;
margin: 10px auto; /* not needed unless you want centered */
}
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 imgand if it too small (say, 100px), then instead of setting widthon the figureset min-widthto the imgsize and set a max-widthto your threshold of 100pxlike this fiddle shows.
正如这个小提琴显示的那样，带有长文本的非常小的图像仍然会有问题。为了使至少看起来很干净，你可以检查的一些最小尺寸img，如果过小（比如100px），然后，而不是设置width上figure设定min-width的img大小和设置max-width您的门槛100px像这样的小提琴表演。
回答by alboth - undkonsorten.com
The solution for this problem is to play with TABLE and TABLECAPTION. It's just 2 lines of code.
这个问题的解决方案是使用 TABLE 和 TABLECAPTION。这只是2行代码。
You can see a live preview of this solution on the website: http://www.sandrasen.de/projektgebiete/kienheide/
您可以在网站上查看此解决方案的实时预览：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 */
}
回答by lifebalance
In HTML5, things are quite straightforward:
在 HTML5 中，事情非常简单：
HTML
HTML
<figure>
<img src="..." >
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="..." >
<figcaption>Caption 2</figcaption>
</figure>
CSS
CSS
figure{
display: inline-block;
}
/* optional, use as required */
figcaption {
max-width: 30%;
caption-side: bottom;
}
