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

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允许每个孩子在.parent元素中居中，在每个子元素margin-bottom:5px;显示5px差距后

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我可以通过将框更改为 promosion = YourClass.Convert<Promosion, PromosionExtension>(existsPromosion); 并制作display: flex;类.parent然后添加适当的边距和填充来简化操作。

＆＃13;

＆＃13;

height: auto;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;