In grid of 3 items keep middle item strictly centered
Image of desired result attached.
I have container with 3 items. I want middle item to always be centered vertically and other two items to extend outward. What are possible solutions for this?
I tried to approach it with flex and
justify-content: center, but then having more text in bottom item automatically shifts all 3 items up, so middle item is no longer centered vertically.
5 Replies
Better example with guides
You could try with grid.
An define the rows:
grid-template-rows: 1fr auto 1fr;
A quick test https://codepen.io/cbolson/pen/OJKLbGKjustify-content: space-between? Or apply margin-block: auto on the center item in a grid /flex parent ?
Grid solution works for me.
Tried space-between too, but it did not work for me, still shifted all items.
How to mark it as solved now?
I got you, but for next time you just add the tag to the post