CODEWITHSUNDEEP
htmlcssflexbox
Akash
Akash

Reputation: 5012

How to vertically align items with different sizes?

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:

Vertical align CSS

I want to align all divs vertically center, as Required:

Vertical align flexbox

.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.

Upvotes: 1

Views: 1689

Answers (4)

Himanshu Singh
Himanshu Singh

Reputation: 2165

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>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274384

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>

Upvotes: 1

Sco
Sco

Reputation: 759

.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>

Upvotes: 0

Tony S
Tony S

Reputation: 571

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>

Upvotes: 4

Related Questions