为什么在flex中`align-items:center`不能将内部元素作为一个整体垂直居中?

时间:2018-06-04 01:17:45

标签: html css flexbox



*{
    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>
&#13;
&#13;
&#13;

我想将整个div中的内部div和图像垂直居中 flex-direction:column;将列作为我的弹性方向,justify-content:cneter;水平居中主div中的所有内部元素 为什么flex中的align-items:center不能将内部元素作为一个整体垂直居中?

1 个答案:

答案 0 :(得分:1)

justify-content:cneter;中有拼写错误。 将cneter更改为:center