html - 垂直居中元素，新元素应添加到新行中

Question

垂直居中元素，新元素应添加到下一行(不使用 <br/> )

.parent { 
    position: relative;
    background: #FF0000;
    text-align: left;
    width: 100%;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    }
.children { 
    background: #000;
    width: 10%;
    height: 200px;
    display: inline-block; 
    position: relative;
    vertical-align: middle;
    }

Jsfiddle 在这里:http://jsfiddle.net/richersoon/m8kp92yL/5/

结果应该是这样的

Answer 1

您需要修改 .parent 使其具有 height:auto; 以适应每个 .children 元素和 的高度添加 padding:20px 0; 以在第一个子元素上方显示 20px 的红色背景。

在你的 .children 中，css display:inline-block 被移除，margin: 0 auto 允许每个 child 在 中居中.parent 元素，在每个子元素之后 margin-bottom:5px; 显示 5px 的间隙。

.parent { 
    position: relative;
    background: #FF0000;
    text-align: left;
    width: 100%;
    height: auto;
    text-align: center;
    vertical-align: middle;
    padding:20px 0px;    
    }
.children { 
    background: #000;
    width: 200px;
    height: 200px;    
    position: relative;
    vertical-align: middle;    
    display:flex;
    margin: 0 auto;
    margin-bottom:5px;    
    }

<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>