0

I want to align image captions for images with different heights. If I try to align the images vertically, the captions will not be aligned, on the other hand if I align the captions, the images will not be aligned as well.

I thought if I used align-self: center on the image divs I could ignore the align-items: baseline I used on the parent div.

So far, I have tried this:

  • align-items: center on the parent:

enter image description here

Notice how the captions are not aligned, but the images are (vertically).

  • align-items: baseline on the parent:

enter image description here

Notice now how the captions are aligned, but the third image "sticks" to the bottom

  • align-items: baseline on the parent and align-self: center; on the images, there is no difference visually between that and my second attempt.

What I want the website to look like:

enter image description here

If possible, to make the third picture bigger too

.container {
  overflow: hidden;
  width: 85%;
  margin: auto;
}

#brands {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
}

#brands .brand-item {
  margin: 10px;
  min-width: 200px;
  max-width: 400px;
  width: 30%;
  text-align: center;
}

#brands .brand-item h3 {
  text-align: center;
  margin: 10px 0 10px 0;
}

#brands .brand-item p {
  text-align: justify;
}

#brands .brand-item img {
  align-self: center; /* this being ignored?*/
  width: 90px;
}
<section>
    <div class="container">
        <div id="brands">
            <div class="brand-item">
                <img src="https://via.placeholder.com/400x512" />
                <h3>HTML 5 Markup</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                <img src="https://via.placeholder.com/400x512" />
                <h3>CSS3 Styling</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                <img src="https://via.placeholder.com/885x200" />
                <h3>Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</section>
a stone arachnid
  • 1,272
  • 1
  • 15
  • 27
C. Rib
  • 340
  • 3
  • 19

1 Answers1

0

.container {
  overflow: hidden;
  width: 85%;
  margin: auto;
}

#brands {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#brands .brand-item {
  margin: 10px;
  min-width: 200px;
  max-width: 400px;
  width: 30%;
  text-align: center;
}

#brands .brand-item h3 {
  text-align: center;
  margin: 10px 0 10px 0;
}

#brands .brand-item p {
  text-align: justify;
}

.img img{
 width:90px;
}
.img {
  display:flex;
  align-items:center;
  height:200px;
  justify-content: space-around;
}
<section>
    <div class="container">
        <div id="brands">
            <div class="brand-item">
              <div class="img">
                <img src="https://via.placeholder.com/400x512" />
              </div>
                <h3>HTML 5 Markup</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                     <div class="img">
                <img src="https://via.placeholder.com/400x512" />
              </div>
                <h3>CSS3 Styling</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                     <div class="img">
                <img src="https://via.placeholder.com/885x200" />
              </div>
                <h3>Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</section>

u need to wrap image inside div with display class and specific height that's how i solve it! hope this help!

adel
  • 3,436
  • 1
  • 7
  • 20