Zurb Foundation 均衡器垂直对齐内容？答案

【问题标题】：Zurb Foundation equalizer vertical align content?Zurb Foundation 均衡器垂直对齐内容？
【发布时间】：2018-07-18 14:06:04
【问题描述】：

我正在使用带有均衡器组件的 Zurb Foundation 5。当我有三个相等的列时，我希望中心列内容（文本）垂直居中，右列内容（图像）垂直底部对齐。

是否有适当或好的方法来做到这一点，并且仍然保持响应式功能？

<div class="row" data-equalizer>
<div class="large-5 small-12 columns" data-equalizer-watch>
    <img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />

</div>
<div class="large-4 small-12 columns" data-equalizer-watch>        
    <p class="subhead">Middle Text</p>
    <ul>
        <li>
           One
        </li>
        <li>Two</li>
        <li>Three</li>           
    </ul>
</div>
<div class="large-3 small-12 columns " data-equalizer-watch>
          <img src="~/Content/Images/Bottomlogo-400.gif" />
</div>

【问题讨论】：

标签： css zurb-foundation

【解决方案1】：

尝试使用下面的 sn-p

.wrapper {
  height: 200px;
  padding: 20px;
  border: solid 1px #000;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.columns {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.large-5 {
  align-self: flex-end;
}

.large-4 {
  align-self: center;
}

<div class="wrapper">
  <div class="row" data-equalizer>
    <div class="large-5 small-12 columns" data-equalizer-watch>
      <img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />

    </div>
    <div class="large-4 small-12 columns" data-equalizer-watch>
      <p class="subhead">Middle Text</p>
      <ul>
        <li>
          One
        </li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </div>
    <div class="large-3 small-12 columns " data-equalizer-watch>
      <img src="~/Content/Images/Bottomlogo-400.gif" />
    </div>
  </div>

【讨论】：