I'm trying to put an link below an image and for whatever reason, the link just keeps going to the side (right) of the picture. The image displays fine and the link works, but I just need it underneath the picture.

Any ideas?

HTML:

<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<a class="link1" href = "https://www.google.com" >Test </a>
</div>

CSS:

.images {
position: absolute; left:10px; top: 200px;
font-size: 120%;
}

I'm new to HTML/CSS so if anyone can explain in easy terms, I would really appreciate it. I have tried lots of different things such as span, align etc and it just won't work!

If I use a p statement instead of a ULR (h ref) the text does go below the image, so I'm baffled!

CodePudding user response：

Images are by default inline-element 8though treated as inline-block). All you need to do, is to set the image as block-level element with : img { display: block; }

img {
  display: block;
}

<div class="images">
  <img src="https://via.placeholder.com/100.jpg" width="280" height="350" alt="Exterior" />
  <a class="link1" href="https://www.google.com">Test </a>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use display flex to make this a column. Explanation: https://www.w3schools.com/css/css3_flexbox_container.asp

.images {
  position: absolute;
  left: 10px;
  top: 200px;
  font-size: 120%;
  display: flex;
  flex-direction: column;
}

<div class="images">
  <img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
  <a class="link1" href="https://www.google.com">Test </a>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could add the break line tag below the image tag.

<div class = "images">
<img src="imgs/2.jpeg" width="280" height="350" alt="Exterior" />
<br>
<a class="link1" href = "https://www.google.com" >Test </a>
</div>