Foundation flex box 拉伸对齐，文本垂直居中

Question

我在这里做教程：https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6，在这里尝试伸展：

https://codepen.io/chrisoncode/pen/wMWEVE

    <p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
    <div class="columns">space</div>
    <div class="columns">
      <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
    </div>
</div>

body          { padding-top:50px; }
.row          { border:1px solid #FF556C; margin-bottom:20px; }
.columns      { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child  { background:#B3BBBB; }

在第 3 个示例中，使用拉伸属性，我试图让文本垂直居中对齐，但没有成功。谁能告诉我怎么做？

我尝试添加 .columns:first-child { background:#085A78;vertical-align:bottom } 但没有成功。

Answer 1

HTML:

<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
  <div class="columns">
    <div class="row align-center text-center"><p>space</p></div>
  </div>
  <div class="columns">
    <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
  </div>
</div>

CSS:

div.row.align-stretch.text-center .columns {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.row.align-stretch.text-center .columns p {
  margin: 0;
}

Answer 2

默认情况下，Flex 子项的高度是相等的，除非您分配了 align-items 值而不是 stretch。

因此：

<div class="row align-stretch text-center">

等同于：

<div class="row text-center">

对于您的示例，最简单的方法是使用 .align-middle，这将使该列成为其中内容的高度，并将其垂直居中到组中较高的列。

否则，您可以将列本身设为 display: flex; 并添加 align-items: center;

Foundation flex box 拉伸对齐，文本垂直居中

Foundation flex box stretch alignment with text vertically centered

zurb-foundation