Foundation 6 Flex Grid 中的内容居中

Question

我正在使用 Zurb Foundation 6 的 Flex Grid 组件来创建一个响应式正方形网格——效果非常好。然而，对于我来说，我无法让方形内容居中。我已经尝试了所有常用的 css 技巧：relative/absolute、嵌套的 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%;
}

Answer 1

For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.

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

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

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

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

问题是盒子里没有 height。内容没有垂直移动的 space。看起来像身高的其实是padding，也就是outside the content box.

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

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

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

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

Answer 2

给你

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

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

Link

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

Answer 3

您也只能使用 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>

Foundation 6 Flex Grid 中的内容居中

Centering content in Foundation 6 Flex Grid

html

css

flexbox

zurb-foundation