将字幕与图像对齐 [英] Aligning a caption to an image

问题描述

JSFiddle

我有一个图像一个数字。该图片具有以下样式：

  height：300px; 
 max-width：300px; 
 display：block; 
 margin：0 auto; 
  

图片必须居中。

图片下方的字幕必须与图片的左下角保持对齐，且不得宽于图片。

图片可以是任何尺寸，因此，

我可以想到的唯一的事情是使图形inline-block，但然后图像左对齐，我需要

任何人都可以提出解决方案。

解决方案

display：table + margin：auto 作为基础，

  figure {display：table; margin：auto; width：1％; / *将扩展到最宽的元素图像或长字* /} img {max-width：300px; / *如果你需要这样* / / *不需要重置显示以避免浏览器的混乱* figcaption {display：table-row; / *在堆栈下面显示的容器table-footer-group中的上一个标记下面工作太太* /}   < figure> < img src =http://portra.wpshower.com/wp-content/uploads/2014/03/martin-schoeller-clint-eastwood-portrait-up-close-and-personal.jpg> < figcaption> C。 Eastwood C. Eastwood C. Eastwood C. EastwoodC。 Eastwood C. EastwoodC。 EastwoodC。 EastwoodC。 Eastwood< / figcaption>< / figure>  

JSFiddle

I have an image inside a figure. The image has the following style:

height: 300px;
max-width: 300px;
display: block;
margin: 0 auto;

The image must be centered.

The caption underneath the image must be left aligned to the bottom left corner of the image and be no wider than the image.

The image could be any size, so fixing the width and offset of the figcaption will not work.

The only thing I could think of is making the figure inline-block, but then the image is left aligned and I need it centered.

Can anyone come up with a solution.

解决方案

display:table + margin:auto as a basis, works fine too

figure {
  display:table;
  margin:auto;
  width:1%;/* will expand to the widest element image or long word */
}

img{
  max-width: 300px;/* if you need so */
/* no need to reset display to avoid browser's confusion */
}
figcaption{
 display:table-row;/* to stack under previous tag within table displayed container table-footer-group works too*/
}

<figure>
    <img src="http://portra.wpshower.com/wp-content/uploads/2014/03/martin-schoeller-clint-eastwood-portrait-up-close-and-personal.jpg">
    <figcaption>C. Eastwood C. Eastwood C. EastwoodC. EastwoodC. Eastwood C. EastwoodC. EastwoodC. EastwoodC. Eastwood</figcaption>
</figure>

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