Foundation 6 Flex Grid 中的内容居中答案

【问题标题】：Centering content in Foundation 6 Flex GridFoundation 6 Flex Grid 中的内容居中
【发布时间】：2016-05-01 05:17:50
【问题描述】：

我正在使用 Zurb Foundation 6 的 Flex Grid 组件来创建一个响应式正方形网格——效果非常好。然而，对于我的生活，我无法让方形内容居中。我已经尝试了所有常用的 css 技巧：相对/绝对、嵌套的 flex 网格等。我一定缺少一些东西——谢谢你的帮助。

这是jsfiddle（这是基本代码，没有任何居中尝试）。

<div class="row">
  <div class="square small-6 columns">
    ABC
  </div>
  <div class="square small-6 columns">
    DEF
  </div>
</div>
<div class="row">
  <div class="square small-6 columns">
    123
  </div>
  <div class="square small-6 columns">
    456
  </div>
</div>

.square {
  border: solid blue 1px;
  padding-bottom: 30%;
}

【问题讨论】：

你是在告诉我你使用 JS 框架来制作 flexbox 吗？我刚刚检查了文档foundation.zurb.com/sites/docs/flex-grid.html 我强烈建议学习“原始” flexbox，它很简单，它是布局的未来。
在那个文档页面上，有解释，但是伙计，这东西比在没有帮助的情况下使用 flexbox 要复杂得多。

标签： html css zurb-foundation flexbox

【解决方案1】：

您也只能使用 Foundation 6（使用 Flex-Grid）来做到这一点。
诀窍是将align-spaced 和align-middle 都附加到外部row。

<div class="row align-spaced align-middle">
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>ABC</span>
    </div>
  </div>
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>DEF</span>
    </div>
  </div>
</div>
<div class="row align-spaced align-middle">
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>123</span>
    </div>
  </div>
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>456</span>
    </div>
  </div>
</div>

<style>
    .square {
      border: solid blue 1px;
      height: 30vh;
    }

</style>

正如@michael-b 所说，高度很重要。
另外，如果不需要蓝线，可以剪掉一个div层。

<div class="row align-spaced align-middle" style="height: 100px;">
  <div class="small-6 row align-center">
    <span>...</span>
  </div>
</div>

【讨论】：

【解决方案2】：

然而，就我的一生而言，我无法让方形内容居中。我已经尝试了所有常用的 css 技巧：相对/绝对、嵌套弹性网格等。

好吧，嵌套的 flex 网格确实有效：

.square {
    border: solid blue 1px;
    padding-bottom: 30%;

    display: flex;                /* new */
    justify-content: center;      /* new */
    align-items: center;          /* new */
}

它将内容垂直和水平居中。

问题是这些盒子没有任何height。内容没有垂直移动的空间。看起来像高度的东西实际上是padding，那是outside the content box。

这是没有padding-bottom: 30%的布局：DEMO 1

然后添加嵌套的弹性容器：DEMO 2

然后给盒子一些高度：DEMO 3

根据CSS Box Model，文本进入内容框。 padding 通常是一个无内容区域。

【讨论】：

我需要网格做出响应并修复高度（如在 DEMO 3 中）打破了这一点 - 只需尝试扩展和缩小演示的浏览器窗口。
padding-bottom: 30%; 与弹性网格一起生成方形图块。
DEMO 3 中的固定高度仅用于说明目的。您仍然可以使您的网格响应。只需使用视口单位而不是像素。修改后的 DEMO 3：jsfiddle.net/23pzeybr/7（垂直和水平调整窗口大小）
hv、hw、hmin 和 hmax 单位很有用，我设计了一个解决方案，将它们与您的答案一起使用。这样做的缺点是容器相对于视口而不是它们的父级，因此，例如，如果您更改装订线，则需要调整正方形的测量值。
如果您希望容器相对于父容器重新调整大小，请使用百分比而不是视口单位。只要确保父母有一个定义的高度。如果父高度也是百分比，请参见此处：stackoverflow.com/a/31728799/3597276

【解决方案3】：

给你

li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}

就是这样，成功了。响应式等。

链接

http://codepen.io/damianocel/pen/WrMmGe

【讨论】：

我查看了codepen，但无法弄清楚如何将列表理念与网格相结合。也许你可以给我看一个产生正方形网格的例子？
或者，你是说我应该把网格全部废弃，只使用列表？
@RandomBits Nono，只是说使用纯flexbox，不需要为此使用zurb基础。像the-echoplex.net/flexyboxes 这样的一个非常简单的链接就是我用过的所有东西，试试吧，它很棒:-)