Align Each Block Vertically In Table-cell

I have 1 parent table-cell .t and 2 child blocks .ch1 and .ch2: HTML:

1

2

Solution 1:

Flexbox can do that:

.t {
  display: flex;
  flex-direction: column;
  background-color: green;
  height: 200px;
  width: 200px;
  justify-content: space-between;
}
.ch1 {
  background-color: blue;
  display: block;
}
.ch2 {
  background-color: red;
  display: block;
}

<divclass="t"><divclass="ch1">1</div><divclass="ch2">2</div></div>

Or

.t {
  display: flex;
  flex-direction: column;
  background-color: green;
  height: 200px;
  width: 200px;
}
.ch1 {
  background-color: blue;
  display: block;
}
.ch2 {
  background-color: red;
  display: block;
  margin-top: auto;
}

<divclass="t"><divclass="ch1">1</div><divclass="ch2">2</div></div>

Solution 2:

You may use margin-top: 164px; for ch2

Share

You may like these posts

• 
  Vertical Centering Of Div Without Javascript When Div's Height Isn't Fixed
• 
  Vertically Align Text Within Div Element
• 
  Vertically Alignment Of A Text Inside A Button With An Image
• 
  Keep Relatively Positioned Child Within Parent Block Max-top Equivalent Needed