基础柔性框拉伸对齐，文本垂直居中

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子项的高度相等，除非您指定除stretch之外的align-items值。

为此：

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

是相同的：

<div class="row text-center">

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

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