我有一些带字幕的图片。 图像以网站为中心,标题应显示在图像下方。到目前为止非常简单,但问题是: 字幕应左对齐并从图像的左下角开始(如报纸)
我可以考虑使用表格的解决方案,但我不喜欢它,因为表格在这里显示表格数据而不是图像和图像标题
表解决方案:
<table class="centered-table">
<tr><td class="image"><img src="stackoverflow.jpg" /></td></tr>
<tr><td class="caption">Unanswered question on stackoverflow.com</td></tr>
</table>
答案 0 :(得分:3)
Hmmmmmmm
<style>
.centered {text-align:center;}
.wrapper {display:inline-block; text-align:left;}
</style>
和
<div class="centered">
<div class="wrapper">
<div class="image"><img src="someimage.jpg" /></div>
<div class="caption">Some caption text!</div>
</div>
<div class="wrapper">
<div class="image"><img src="someimage.jpg" /></div>
<div class="caption">Some caption text!</div>
</div>
</div>
还是什么? :)
答案 1 :(得分:3)
我会使用<figure>
和<figcaption>
一点display: table
来获得您想要的效果。
请参阅 Example
答案 2 :(得分:1)
使用嵌套div标签是另一种解决方案,如此相关问题所示: Correctly aligning image captions
答案 3 :(得分:0)
尝试这样的事情:
答案 4 :(得分:0)
将您的图片和标题包含在div中,并为其提供内联块显示样式。
<div id="article">
<div class="title"><div>
<img src="picture.jpg" />
<em>Caption for the picture.</em>
</div></div>
<p>rest of the articlce...</p>
</div>
使用CSS。
div.title
{
text-align:center;
}
div.title > div
{
display:inline-block;
text-align:left;
}