-1

*{
    margin:0;
    padding:0;
}    
#main{
    margin:0 auto;
    width:300px;
    height:180px;
    border:1px solid red;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}       
#inner{
    width:100px;
    height:40px; 
    line-height:40px;
    border:1px solid red;
    text-align:center;
    margin-bottom:10px;
} 
<div id="main">
    <div id="inner">inner box</div>
    <img src="https://i.stack.imgur.com/VOK9C.png" alt="">
</div>

I want to vertically center the inner div and image in the main div as a whole.
flex-direction:column; make column as my flex direction,justify-content:cneter; horizontally center all inner elements in main div.
Why align-items:center in flex can't vertically center the inner elements as a whole?

showkey
  • 482
  • 42
  • 140
  • 295

1 Answers1

1

There is a typo in justify-content:cneter;. change cneter to: center.

Nesa Mouzehkesh
  • 3,755
  • 2
  • 14
  • 11