使用 Foundations 'Flex Grid' 居中对齐嵌套项目

Question

使用 Foundation 6 的 Flex Grid，我试图将已与 Foundation 的 'align-center' class.

居中对齐的父元素的子元素居中对齐

父 .row 使用 Flex Box 对齐（对齐）其子项的内容。如何使用框架将中心对齐应用于第 4 行的 ele？

备注：

第4行的'align-self-center'没有效果。
内联样式仅用于 sample/readability。

将 'margin:auto' 应用到第 4 行可以解决问题，但是在使用 img 的情况下不会。

<section class="row expanded align-middle align-center" style="height: 100%;">
<div class="columns small-7 medium-4">
    <h3 class="text-center">lakakakaka</h3>
    <div class="align-self-center" style="height: 20px; width: 20px; background: pink;"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

在使用 img 的情况下，应用 wrapper 作为列并设置 margin: auto 也能达到预期的效果，但肯定有更好的方法吗？

<section class="row expanded align-middle align-center" style="height: 100%;">
    <div class="columns small-7 medium-4">
        <h3 class="text-center">lakakakaka</h3>
        <div class="row columns small-6" style="margin:auto">
            <img src="..." alt="..." style="width: 100%;" />
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</section>

Answer 1

默认情况下，.row 是弹性父项，因此 .columns 是弹性子项。要使 .column 成为 flex 父级以便它的子级可以对齐，您需要一些 CSS like

.align-middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

我们最近写了一个关于这个的课程，这将有助于https://zurb.createsend.com/campaigns/reports/viewCampaign.aspx?d=y&c=E5D5A5C6700B86DC&ID=3053EAAD5186C206&temp=False&tx=0

使用 Foundations 'Flex Grid' 居中对齐嵌套项目

Central aligning nested items using Foundations 'Flex Grid'

zurb-foundation

zurb-foundation-6