使用Foundations集中对齐嵌套项'Flex Grid'-Java 学习之路

使用Foundation Grid 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>

1 回答

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
回复于 2024-04-28T23:03:31+08:00

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

1 回答

相关问题