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

我正在做一个布局，我无法弄清楚如何让这些列的高度相等，特别是文字环绕时的绿色区域。你能帮我吗？等高度柱 - 柔性盒和柔性包装：包装

我的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

我不认为这会工作，因为用户可以把他们想要的任何标题放在那里。 –

啊，我不太理解这个问题 - 认为这个文本是有些问题的。 –

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

回答

相关问题