Question

使用Foundation 6的Flex Grid，我正在尝试集中调整已与Foundation的“对齐中心”类集中对齐的父元素的子元素。

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

注意：

第4行的'align-self-center'无效。
仅用于样品/可读性的在线样式。

将'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的情况下，将包装器作为列应用并设置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是一个flex父级，因此.columns是flex子级。要使.column成为一个flex父项，以便它的子项可以对齐，你需要一些像

这样的CSS

.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'集中对齐嵌套项

1 个答案: