Align multiple img in different divs

Question

I have 4 pictures that I wish to align, the issue I have is that they are not in the same div and I cannot find a responsive solution.

Depending on the size of the screen, the text may take up to 3 lines and I would like for all of the logos to adapt simultaneously even if their own text does not have as many lines.

This is what I currently have :

The logos are what I would like to align.

This is the HTML :

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="buffer"></div>
      <p class="text-center">Mon LinkedIn</p>
      <a class="image-link" href="link1">
        <img class="image-link img-size" src="assets/img/contact/LinkedIn-Logo.png">
      </a>
    </div>
    <div class="col-sm-3">
      <div class="buffer"></div>
      <p class="text-center">Mon profil Malt</p>
      <a class="image-link" href="link2">
        <img class="image-link img-size" src="assets/img/contact/logoMalt.png">
      </a>
    </div>
    <div class="col-sm-3">
      <div class="buffer"></div>
      <p class="text-center">Mes projets open source</p>
      <a class="image-link" href="link3">
        <img class="image-link img-size" src="assets/img/contact/so-logo.png">
      </a>
    </div>
    <div class="col-sm-3">
      <div class="buffer"></div>
      <p class="text-center">Mes contributions open source</p>
      <a class="image-link" href="link4">
        <img class="image-link img-size" src="assets/img/contact/GitHub_Logo.png">
      </a>
    </div>
  </div>
</div>

And this is the CSS :

.image-link {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-size {
  max-width: 100px;
  max-height: 20px;
}

.buffer {
  padding-top: 40px;
}

I did try to put the text and the logos in different rows but even though it yields a good result on big screens, it does not on small screens ( the text gets separated of the logo )

A solution is to set the height of the text container (create a div around your
for that), above your image, to be constant on your four divs — Ostn, Jun 28 '20 at 19:04

Fateh Mohamed · Answer 1 · 2020-06-28T19:20:07.687

0

position your link at the bottom will do the trick for you

.image-link {
  position:absolute;
  bottom:0;
}

and you can set the max-height for your text container if you want

edited Jun 28 '20 at 19:20

answered Jun 28 '20 at 19:04

Fateh Mohamed

20,445
5
43
52

it only partially works. It does get everything aligned but it is no longer centred in the div – Matthieu Raynaud de Fitte Jun 28 '20 at 22:47
the parent div is smaller than the logo. The image ends up in the bottom left corner and therefore not centred – Matthieu Raynaud de Fitte Jun 28 '20 at 22:52

score -1 · Answer 2 · answered Jun 28 '20 at 19:10

You can adjust the height of the text (paragraph tag) by auto. If don't help done it by changing auto to 20% - 40%, depending on the size of the screen. You have to check the maximum height but I think 30% would be sufficient according to the text.

.buffer p {
height = 30%
}

Align multiple img in different divs

2 Answers2