26

我总共有 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>

等等。

4

5 回答 5

54

我会这样设置代码:

<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;
}

Because each figure is an inline-block, you can basically repeat the unit three times per row, either adding a <br> after the every third one, or wrapping three in a block element, or using a CSS3 nth-of-type(3n) selector to add a line break or similar.

Use text-align: center on figcaption to align the test to the center.

See demo at: http://jsfiddle.net/audetwebdesign/4njG8/

The results look like this (for a wide enough screen):

enter image description here

于 2013-10-02T14:13:16.280 回答
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;是唯一需要的。

于 2018-03-21T03:05:00.830 回答
1

每个图应该只包含一个图像和一个 figcaption。

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

顺便说一句......“中心”元素不再存在。

代码笔示例

于 2013-10-02T14:05:39.697 回答
1

jupyter notebook markdown单元格中的图像标题对齐:(
包括:如何调整文本对齐边距和字体样式)

<table>
    <tr>
    <td style='text-align:center;'>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
             style='zoom:65%;'> <b> Tree and Sun </b><img>
    </td>
    <td> 
        <img src="https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736877__340.jpg" 
             style='zoom:91%;'/>
    <p style='text-align: right; margin-right: 3em; font-family: Serif;'><b> Moon and meow </b></p>
    </td>
    </tr>
</table>

在此处输入图像描述

于 2021-05-26T12:14:00.313 回答
0

figcaption中提供对齐属性就足够了:text-starttext-centertext-end

<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>

在此处输入图像描述

于 2021-01-02T06:01:49.743 回答