如何使兩個中心在兩行中的兩個div

我有兩個塊（DIV），並且都是屏幕居中，並且我想讓這些塊按照附件一行一行地垂直排列，請注意，父div是在display:flex如何使兩個中心在兩行中的兩個div

.wrapper{ 
 
width:100%; 
 
float:left; 
 
background:#ccc; 
 
align-items: center; 
 
display: flex; 
 
} 
 
.div1 { 
 
margin: 10px auto; 
 
width: 300px; 
 
border: 1px solid #000; 
 
background: #fff; 
 
} 
 
.div2 { 
 
margin: 10px auto; 
 
width: 300px; 
 
border: 1px solid #000; 
 
background: #fff; 
 
}

<div class="wrapper"> 
 
    <div class="div1"> Block 1 </div> 
 
    <div class="div2"> Block 2 </div> 
 
</div>

來源

2016-10-20 Sanjeev Kumar

你真的需要了'顯示：flex'？在這種情況下不需要。只需使用'text-align：center'。 – Elfayer

我已經使用flex來使子div垂直對齊中心 –

由於您使用的是flexbox變化柔性軸垂直使用flex-direction: column。下面

見片段：

.wrapper { 
 
    width: 100%; 
 
    float: left; 
 
    background: #ccc; 
 
    align-items: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.div1 { 
 
    margin: 10px auto; 
 
    width: 300px; 
 
    border: 1px solid #000; 
 
    background: #fff; 
 
} 
 
.div2 { 
 
    margin: 10px auto; 
 
    width: 300px; 
 
    border: 1px solid #000; 
 
    background: #fff; 
 
}

<div class="wrapper"> 
 
    <div class="div1">Block 1</div> 
 
    <div class="div2">Block 2</div> 
 
</div>

來源

2016-10-20 07:43:09 kukkuz

感謝您的快速響應，添加了'flex-direction：column'但是丟失了垂直對齊中間的 –

現在使用justify-content：space-around '或'空間之間'，因爲你看到它適合... – kukkuz

太棒了，它的工作！謝謝！ –

如何使兩個中心在兩行中的兩個div

回答

相關問題