Text under images in links

Issue

I want images with text underneath. The images is in an <a> and when i try to add text it jumps up to the start of the page.

.seasons{
   display: flex;  
   
}

.season-img{
    width: 70%;
    border-radius: 70px;
    padding: 50px;
}

#season-left{
    float: right;
}

#season-right{
    float: left;
}

<div class="seasons">
    <a href="" class="season-a">
            <img src="friends-season1.webp" alt="season 1" class="season-img" id="season-left">
            Season 1
    </a>
    <a href="" class="season-a">
        <img src="friends-season2.webp" alt="season 2" class="season-img" id="season-right">
        Season 2
    </a>
</div>

I tried several things and none have worked

Solution

Actually the text did not "jump up" but rather, is actually place on the same horizontal line as it's corresponding image. The reason why that happens is because both the image and text within the <a> tag are inline elements.

Assuming that you are using the text as a label for the image, here's a boiler plate you can start with. Notice that I am using <figcaption> tag for the text below the image which is a block level element. This would cause the text to sit on an individual row itself, below the image.

Do adjust the code to meet your needs. I have also included a codepen here for you to visualise the difference between your answer and mine.

https://codepen.io/Jun-Wen-Soh/pen/yLweQPX

HTML

<div class="seasons">
  <a href="">
    <figure>
      <img src="https://images.unsplash.com/photo-1683009427692-8a28348b0965?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Description of the image">
      <figcaption>Season 1.</figcaption>

    </figure>
  </a>
  <a href="">
    <figure>
      <img src="https://images.unsplash.com/photo-1683009427692-8a28348b0965?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Description of the image">
      <figcaption>Season 2.</figcaption>
    </figure>
  </a>
</div>

CSS

img {
  width: 300px;
}

.seasons{
   display: flex;  
}

Answered By - Jun Wen Soh