I have 9 images in total and three on each row, I have managed to add a caption for one of my images, but failed to do so for the other ones as it just centers everything underneath and not aligned text to rows per image.
<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>
And so on.
I would set up the code this way:
<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>
and apply the following 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):
this works for me.
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;
is the only thing needed.
Each figure should only contain one image and one figcaption.
<figure>
<img>
<figcaption>
</figcaption>
</figure>
BTW...the 'center' element no longer exists.
Image caption alignment in jupyter notebook markdown cell:
(includes: how to adjust text alignment margins and font style)
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.