时间戳

首页 > 解决方案 > Zurb Foundation 均衡器垂直对齐内容？

css - Zurb Foundation 均衡器垂直对齐内容？

问题描述

我正在使用带有均衡器组件的 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>

标签： csszurb-foundation

解决方案

尝试使用以下代码段 

.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>

推荐阅读