Sailcomp Sailcomp - 23 days ago 10
CSS Question

Center inner DIVs vertically depending on the highest sibling

enter image description here

I have an outer DIV (4) and three inner DIVs (1-3). I don't care about width here. It's all about height and vertical centering. I want the outer DIV (4) to get the height of the highest inner DIV (2 in row A). More importantly I want the other inner DIVs (1 and 3 in row A) to get centered vertically (in relation to the height of the outer DIV that has the same height as the highest inner DIV).

The contents of the DIVs are dynamic (compare row A and B) therefore I don't know which inner DIV will be the highest. Until now I used a jQuery solution that set the margin-top of the smaller DIVs (red marks) but I would like to solve it in plain CSS now.

Answer

This is easy using a flexbox - the property align-items: center produces the desired result - see a demo below:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}
.wrapper > div {
  border: 1px solid;
}
<div class="wrapper">
  <div class="one">Some text here</div>
  <div class="two">
    There is a lot of text here
    <br>There is a lot of text here
    <br>There is a lot of text here
    <br>
  </div>
  <div class="three">Some
    <br>text</div>
</div>