Question

我在图中有一个图像。该图像具有以下样式：

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

图像必须居中。

图像下方的标题必须左对齐到图像的左下角，并且不要比图像宽。

图像可以是任何尺寸，因此固定图形的宽度和偏移将不起作用。

我唯一能想到的是将图形内联块，但是图像保持对齐，我需要它居中。

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

Answer 1

display:table + margin:auto作为依据，也可以正常使用

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>

Answer 2

请试试这个：

figure{
  margin: 0 auto;
  max-width: 300px;
}

img{
  height: 300px
}

将标题与图像对齐

2 个答案: