Reputation: 25
This image shows what currently happens:
Here's the code I used:
<CENTER><IMG SRC="https://www.fanficparadise.com/gallery/CYOA/extension.png"></CENTER>
<CENTER><IMG SRC="https://www.fanficparadise.com/gallery/CYOA/time.png"></CENTER>
<CENTER><IMG SRC="https://www.fanficparadise.com/gallery/CYOA/extended.png"></CENTER>
As you can see, there is a bit of grey between the pics. I was trying to get them to sit on top of one another without any grey between them, but it doesn't work. How do I do that?
Upvotes: 1
Views: 68
Reputation: 9843
.img-container img {
display: block;
margin: auto;
}
<div class="img-container">
<img src="https://www.fanficparadise.com/gallery/CYOA/extension.png">
<img src="https://www.fanficparadise.com/gallery/CYOA/time.png">
<img src="https://www.fanficparadise.com/gallery/CYOA/extended.png">
</div>
A couple of things to note:
<center>
tag is very out of date, so avoid using it.<img>
tags are inline by default, which will add additional margin/spacing below them. By changing them to display:block;
we remove that extra white space.display: block
, we can use margin: auto
to centre-align the images instead of using the deprecated <center>
tag.On the chance you cannot modify the CSS, you could also use inline styles:
<img src="https://www.fanficparadise.com/gallery/CYOA/extension.png" style="display: block; margin: auto;">
<img src="https://www.fanficparadise.com/gallery/CYOA/time.png" style="display: block; margin: auto;">
<img src="https://www.fanficparadise.com/gallery/CYOA/extended.png" style="display: block; margin: auto;">
Upvotes: 2