Flexbox垂直對齊包裝中的特定內容？

Question

我的CMS設置相當嚴格，有2列標題和內容，如下所示：

 .wrapper { overflow: auto; border: 1px solid #ccc; text-align: center; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .left, .right { float: left; width: 45%; padding: 5px; } 

 <div class="wrapper"> <div class="left"> <h3>Title (should be aligned to top)</h3> <div class="content"> left<br> left<br> left<br> left<br> </div> </div> <div class="right"> <h3>Title (should be aligned to top)</h3> <div class="content"> right </div> </div> </div> 

---

的jsfiddle

---

我想讓每列的.content垂直對齊到中間，但保持標題h3垂直對齊到頂部。

通常我會使用flexbox實現垂直對齊：

.wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

但當然這會影響.wrapper所有元素。

有人會知道我可以“定位” .content類並獲得相同效果的方式（記住我不能真正改變HTML）嗎？

Answer 1

這是一種黑客，但它有效：

1. 從wrapper移除align-items: center ，並left和right flex:1到flex子項

2. 使內left和right容器中的column flexbox和中間的h3和content使用justify-content:center

3. 使用margin-bottom:auto將h3推到頂部並允許content保持在中間位置。

見下面的演示：

 .wrapper { overflow: auto; border: 1px solid #ccc; text-align: center; display: -ms-flexbox; display: -webkit-flex; display: flex; } .left, .right { padding: 5px; display: flex; flex-direction: column; justify-content: center; flex: 1; } .left h3, .right h3 { margin-bottom: auto; } .content { margin-bottom: auto; } 

 <div class="wrapper"> <div class="left"> <h3> Title (should be aligned to top) </h3> <div class="content"> left <br>left <br>left <br>left <br> </div> </div> <div class="right"> <h3> Title (should be aligned to top) </h3> <div class="content"> right </div> </div> </div> 

Answer 2

檢查這個小提琴

.wrapper {
    overflow: auto;
    border: 1px solid #ccc;
    text-align: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    align-items: flex-start; // changed
}