CSS vertical align with different image heights

Question

I'm trying to vertically align the items in the first row for all possible image heights:

See here: https://lawncarepro.co.uk/code-test/

I have tried the solutions listed here How to vertically align an image inside a div including:

• Setting .p-c to inline-block with height: 100%; and using vertical align middle on all three columns in the first row
• Doing the above but with a new div for the first row
• Using position: relative; and position: absolute; (this generally pushes things out of the box or changes the column order)
• Using position: relative; top: 50%; transform: translateY(-50%); on the columns in the first row

Answer 1

These codes will guide you. and for bottom section can use flex too (width=50%) there is no need for float left.

.main-wrapper {
  border: 1px solid red;
  width: 75%;
  margin: 0 auto 0 auto;
}

.main-wrapper .p-c-top {
  display: flex;
  width: 100%;
}

.main-wrapper .p-c-top .content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  width: 33.333%;
}

.main-wrapper .p-c-top .content-col img {
  width: 100%;
}

 <div class="main-wrapper">
        <div class="p-c-top">
            <div class="content-col">
                <img src="https://ir-uk.amazon-adsystem.com/e/ir?t=lawncarepro-21&language=en_GB&l=li2&o=2&a=B0099LETKS" alt="">
            </div>
            <div class="content-col">
               <h4>overal value</h4>
               <p>stars</p>
            </div>
            <div class="content-col">
               <h4>price</h4>
               <p><a href="#">check on amazon</a></p>
            </div>
        </div>
        <div class="p-c-bot"></div>
    </div>

Answer 2

have you tried flexbox? You can create 3 dives with a parent div which has display flex and then justify them horizontally and vertically to center.So with every image the parent height automatically will be set due to image height and other items remain in center.

Answer 3

I would suggest going with CSS-Grid (and make changes as required):

I quickly played around the code and came up with this.

  .p-c {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: max-content max-content;
    align-items: center;
   }

Please Note: One of the div's is empty. So, you can manually set the display:none; if required. And align items are required. With Grids there are too many ways to layout our HTML. Just do some R&D :)