代码之家 › 专栏 › 技术社区 › ManxJason

使用基础“柔性网格”集中对齐嵌套项

zurb-foundation-6 zurb-foundation

ManxJason · 技术社区 · 8 年前

在Foundation 6的Flex网格中,我试图集中对齐父ele的子元素,该子元素已与Foundation的“align center”类集中对齐。

parent.row使用FlexBox对齐(对齐)其子级的内容。如何使用框架将中心对齐应用于4号线上的ele?

笔记:

第4行上的“对齐自中心”无效。

对第4行应用“margin:auto”可以解决这个问题,但在使用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 回复 | 直到 8 年前

rafibomb 8 年前

默认情况下,.row是灵活的父级,因此.columns是灵活的子级。要使.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

推荐文章

Matt · 基础6使用SASS更改排水沟宽度

7 年前

Dhiraj Sharma · 网页包中的基础抛出错误

7 年前

coolsaint Christian C. Salvadó · 在Foundation 6.4.3卡中,如何阻止图像在Flexbox容器内拉伸?

7 年前

Nir Tzezana · Foundation 6 catch drilldown click事件

7 年前

tomislav_t · 将单元均匀分布在Zurb基础6的立柱上

7 年前

Dwight Gunning · Karma单元测试Vue。js+基础

7 年前

Run · 基础6.4.1-引导。容器等效物?

7 年前

foufrix · Css滚动和大小调整

7 年前

ManxJason · 使用基础“柔性网格”集中对齐嵌套项

8 年前

Ahad Porkar · Foundation 6子菜单展开不工作

8 年前