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:I would suggest going with CSS-Grid (and make changes as required):
I quickly played around the code and came up with this.
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 🙂
If you have better answer, please add a comment about this, thank you!