How to vertically align items with different sizes? - html

Question

I'm facing a issue of vertically aligning items when a div contains nested child elements, please check: https://codepen.io/akashpen0501/pen/rNaGgXv
Note, the container has a fixed height of 200px & I want them children to be centered vertically
Current result:
I want to align all divs vertically center, as
Required:
.container {
display: flex;
flex-flow: row;
align-items: center;
border: 1px solid black;
height:200px;
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
Please advice.

Answer 1

try align-items: flex-start on the container
.container{
display: flex;
flex-flow: row;
align-items: self-start;
border: 1px solid black;
}
.container div{
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span{
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>

Answer 2

You can approximate this using baseline alignment and pseudo element. Change baseline with center in the below example to see that left/right will stay at the same place.
.container {
display: flex;
flex-flow: row;
align-items: baseline;
border: 1px solid black;
height:200px;
background:linear-gradient(red,red) center/100% 1px no-repeat
}
.container:before {
content:"";
height:calc(50% + 0.25em)
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
<div class="container">
<div>left</div>
<div>center</div>
<div>right</div>
</div>

Answer 3

.container {
display: flex;
align-items: flex-start; // <----- here
border: 1px solid black;
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
<div class="container">
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>

Answer 4

Wrap your child components inside a <div> and give then class .children with following properties, it will keep your content vertically aligned and horizontally at the same height.
.children{
display: flex;
align-items: flex-start;
}
.container {
display: flex;
flex-flow: row;
align-items: center;
border: 1px solid black;
height:200px;
}
.container div {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.container span {
display: block;
}
.children{
display: flex;
align-items: flex-start;
}
<div class="container">
<div class=children>
<div>left</div>
<div>center<span class="nested child">nested content</span></div>
<div>right</div>
</div>
</div>