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

please refer to the flex property and flex-direction: column it will help you I guess — Rijil, Jun 16 '22 at 05:02
@Rijil I don't quite understand, are you saying adding flex values to the columns will enable vertical-align: middle; to work? — user16421, Jun 16 '22 at 05:12
@user16421 I know, but try to follow SO's guidelines for creating a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — Camelopardalus, Jun 16 '22 at 05:38
@Thomas it's not really practical to add it to a jsfiddle or similar due to the WP column shortcodes I'm using — user16421, Jun 16 '22 at 05:42

score 1 · Answer 1 · answered Jun 16 '22 at 05:16

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 :)

Rottmayer · Answer 2 · 2022-06-16T05:24:08.933

0

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.

edited Jun 16 '22 at 05:24

answered Jun 16 '22 at 05:23

Rottmayer

16
2

When I set add display: flex; to .p-c this gets rid of the columns (everything turns into a single row). Setting the other columns also as display: flex; doesn't fix this. I'm not sure if a flexbox would work here or if there's a different way I can implement it. – user16421 Jun 16 '22 at 05:49
don't set flex to .p-c . create another parent div just for above section. Seperate them. and then create 3 div inside the new div. It seems you are not familiar with flex-box. – Rottmayer Jun 16 '22 at 06:38
this has helped, but the content is only appearing on the left-hand side (see: https://lawncarepro.co.uk/code-test/). I have tried altering margin and width settings but haven't been able to get it to distribute horizontally – user16421 Jun 16 '22 at 07:30

Rottmayer · Accepted Answer · 2022-06-16T09:22:33.877

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>

I have added these attributes to my set-up (other than the red borders) but am still stuck with the flexbox on the left. I can't get it to distribute evenly: https://i.imgur.com/fFAV682.png — user16421, Jun 16 '22 at 10:38
still didn't change the bottom section, I see float left and clear fix in your codes. create another parent div for bot section and remove float:left. rewrite css — Rottmayer, Jun 17 '22 at 09:00

CSS vertical align with different image heights

3 Answers3