CODEWITHSUNDEEP
htmlcsscenter
Ariel Schnee
Ariel Schnee

Reputation: 25

How do I get these pics on top of one another?

This image shows what currently happens:

Three images with a black background are centered on a page with a grey background. The images are vertically stacked and are spaced so the edges aren't adjacent.,

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

Answers (1)

Kirk Beard
Kirk Beard

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:

  1. The <center> tag is very out of date, so avoid using it.
  2. <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.
  3. Now that the images are set to 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

Related Questions