如何在图像下方对齐标题

Question

我总共有9张图片，每行有3张图片，我已设法为其中一张图片添加标题，但未能为其他图片添加标题，因为它只是将所有内容放在下面，而不是将文本对齐到每行图像。

<figure>
<center>
<img src='images/album1.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>

<img src='images/album2.jpg' alt='missing' />
<figcaption>Album name goes here
<br>Year goes here
<br>artist name goes here</figcaption>
</figure><center>

等等。

Answer 1

我会这样设置代码：

<figure>
    <img src='http://placehold.it/200x200' alt='missing' />
    <figcaption>Album name goes here
        <br>Year goes here
        <br>artist name goes here</figcaption>
</figure>

并应用以下CSS：

figure {
    display: inline-block;
    border: 1px dotted gray;
    margin: 20px; /* adjust as needed */
}
figure img {
    vertical-align: top;
}
figure figcaption {
    border: 1px dotted blue;
    text-align: center;
}

因为每个figure都是一个内联块，所以基本上你可以每行重复三次单元，或者在每三次后添加一个<br>，或者在一个块元素中包含三个，或者使用CSS3 nth-of-type(3n)选择器添加换行符或类似内容。

在text-align: center上使用figcaption将测试与中心对齐。

请参阅演示：http://jsfiddle.net/audetwebdesign/4njG8/

结果看起来像这样（对于足够宽的屏幕）：

Answer 2

这适合我。

figure {
  display: inline-block;
  text-align: center;
  border: 1px dotted gray;
  margin: 5px; /* adjust as needed */
}
figure img {
  vertical-align: top;
}
figure figcaption {
  border: 1px dotted blue;
}

  

text-align：center;是唯一需要的东西。

Answer 3

每个图形只应包含一个图像和一个图形。

<figure>
    <img>
   <figcaption>
   </figcaption>
</figure>

BTW ......“中心”元素已不复存在。

Codepen Example

Answer 4

在 figcaption 中提供对齐属性就足够了：text-start、text-center 和 text-end< /strong>

<figure>
   <img src='http://placehold.it/150x150' alt='missing' class="figure-img img-fluid rounded-circle"/>
   <figcaption class="figure-caption text-center">Name</figcaption>
</figure>

Answer 5

对于 jupyter 笔记本：

<table>
    <tr>
        <td style='text-align:center;'><img src="attachment:image-2.png" style='zoom:50%;'><b>Log of y</b></img></td>
        <td style='text-align:center;'><img src="attachment:image.png" style='zoom:50%;'><b>Log of both x and y</b></img><td>
    </tr>
</table>