基础弹性框拉伸对齐方式，文本垂直居中

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; }

在第三个示例中，使用Stretch属性，我试图使文本垂直对齐中间并且没有运气。谁能告诉我该怎么做？

我尝试添加.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值。

为此：

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

与：

<div class="row text-center">

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

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