CODEWITHSUNDEEP
htmlcssimagetextalignment
user17183913
user17183913

Reputation:

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!

Upvotes: 1

Views: 4906

Answers (3)

tacoshy
tacoshy

Reputation: 13001

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>

Upvotes: 1

Faith Akintoye
Faith Akintoye

Reputation: 36

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>

Upvotes: 0

naxsi
naxsi

Reputation: 622

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>

Upvotes: 0

Related Questions