How to vertically align text under image

I'm trying to personalise my Shopify (brooklyn theme) and I created a custom HTML section.

I created a line of 3 responsive images and it works well. At the beginning I wanted to place a text over image but I couldn't figure it out so I just wrote it under the image. Now I am trying to make it look better by making it center, top and vertical align.

I tried to vertically align the text under my responsive pictures. On computer the space is fine but on phone the space is too large. I didn't succeed with the vertical-align command so I put added line-height: 0px but it's still not enough.

Somebody could help? https://legarsleathercraft.com/fr

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33.33%;
  padding: 5px;
}

<div class="row">
  <div class="column"><img src="https://cdn.shopify.com/s/files/1/0498/1912/3874/files/leather-bags-collection-legarsleathercraft_f292366e-e502-4f05-a7b4-bca24ac12d1b_480x480.jpg?v=1642143240" alt="girl with a cap with a leather cognac and chocolate backpack on her back" style="width: 100%;">
  <h5 style="text-align: center; line-height: 0px;">Bags</h5>
  </div>
  <div class="column"><img src="https://cdn.shopify.com/s/files/1/0498/1912/3874/files/leather-accessories-collection-legarsleathercraft_2670cdc6-1500-4035-a545-095135eba36a_480x480.jpg?v=1642143268" alt="leather accessories collection legars leathercraft" style="width: 100%;">
  <h5 style="text-align: center;line-height: 0px;">Accessories</h5>
  </div>
  <div class="column"><img src="https://cdn.shopify.com/s/files/1/0498/1912/3874/files/leather-wallets-collection-legarsleathercraft_67288eec-f3ee-4447-ae47-aff1f5469a8f_480x480.jpg?v=1642143255" alt="bifold leather wallet light brown with with thread and a coin pocket" style="width: 100%;">
  <h5 style="text-align: center;
  line-height: 0px;  ">Wallets</h5>
  </div>
</div>

The <h5> element applies a margin (default) of 1.67em from the top and bottom^[1]. If the screen width is less than 767px with the media query, you should assign 0px to the margin value of the <h5> element ^[2].

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}
h5{
  text-align: center;
}

/* The following styles are applied if the screen width is less than 767px. */
@media screen and (max-width: 767px){
  h5{
    text-align: center;
    
    /* The space between <img> and <h5> is caused by the margin value of the <h5> element. */
    margin: 0px;
  }
}

<div class="row">
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0498/1912/3874/files/leather-bags-collection-legarsleathercraft_f292366e-e502-4f05-a7b4-bca24ac12d1b_480x480.jpg?v=1642143240" alt="girl with a cap with a leather cognac and chocolate backpack on her back" style="width: 100%;">
    <h5>Bags</h5>
  </div>
  
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0498/1912/3874/files/leather-accessories-collection-legarsleathercraft_2670cdc6-1500-4035-a545-095135eba36a_480x480.jpg?v=1642143268" alt="leather accessories collection legars leathercraft" style="width: 100%;">
   <h5>Accessories</h5>
  </div>
  
  <div class="column">
    <img src="https://cdn.shopify.com/s/files/1/0498/1912/3874/files/leather-wallets-collection-legarsleathercraft_67288eec-f3ee-4447-ae47-aff1f5469a8f_480x480.jpg?v=1642143255" alt="bifold leather wallet light brown with with thread and a coin pocket" style="width: 100%;">
   <h5>Wallets</h5>
  </div>
</div>

^{1 - Browsers' Default CSS for HTML Elements
2 - Beginner's Guide to media queries}

How to vertically align text under image

Related

Recent Posts