等高度柱 - 柔性盒和柔性包裝：包裝

我正在做一個佈局，我無法弄清楚如何讓這些列的高度相等，特別是文字環繞時的綠色區域。你能幫我嗎？等高度柱 - 柔性盒和柔性包裝：包裝

我的HTML模板，更.category的容器內...

<div class="flex-container"> 
    <div class="category-container"> 
    <a href="#" class="img-gallery-col medium-internal-page-static-image" style="background-image: url('http://placehold.it/800/800');"> 
    </a> 
    <h4 class="text-center">Salads &amp; Sides</h4> 
    </div> 
</div>

我對柔性容器的CSS是...

.flex-container { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-start; 
}

這裏是如果分類編號鏈接這有助於http://codepen.io/johnsonjpj/pen/evopaV?editors=1100

編輯：我已經更新了筆，並添加了他ight到類別容器，並使其顯示：flex。然後我加入了flex-grow到h4。我怎樣才能在綠色區域內垂直居中？

來源

2017-04-04 Jacob J

您的代碼中沒有定義任何高度。因此，您的文本塊沒有理由具有相同的高度。它們的高度由內容定義，這是默認設置（height: auto）。

您需要在佈局中的某處定義高度，無論是在body元素上還是在靠近文本的容器元素上。然後，您可以建立相同的高度並使用柔性屬性進行垂直和水平對齊。

來源

2017-04-04 21:27:50

好吧，我已經更新了我的筆。 http://codepen.io/johnsonjpj/pen/evopaV?editors=1100現在有辦法在綠色區域垂直對齊文本嗎？ –

http://codepen.io/anon/pen/jBRWeK?editors=1100 –

感謝您的幫助，我現在明白了:) –

-1

當您調整頁面大小時，所有文本框都位於同一行上，並指向它們全部位於兩行的位置（將瀏覽器調整爲寬/窄）。

由於您在某種中間地帶有此問題，因此我建議使用CSS @media查詢將.category-container h4的高度屬性更改爲預先確定的值，您知道這些值屬於預期值。

來源

2017-04-04 21:19:52

我不認爲這會工作，因爲用戶可以把他們想要的任何標題放在那裏。 –

啊，我不太理解這個問題 - 認爲這個文本是有些問題的。 –

等高度柱 - 柔性盒和柔性包裝：包裝

回答

相關問題