Search code examples
htmlcssimagetextalignment

Putting a link below an image

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!

Solution

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