Question

我正在使用Zurb Foundation 6的Flex Grid组件创建一个响应方块的网格 - 并且效果很好。然而，对于我的生活，我无法将广场内容置于中心位置。我已经尝试了所有常用的CSS技巧：相对/绝对，嵌套的弹性网格等。必须有一些我缺少的东西 - 感谢您的帮助。

这是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

然而，对于我的生活，我无法将广场内容集中在一起。我已经尝试了所有常用的css技巧：相对/绝对，嵌套的flex网格等等。

嗯，嵌套的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

的布局

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

然后给方框一些高度：DEMO 3

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

Answer 2

你去吧

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

就是这样，诀窍。响应等。

链接

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中居中内容

3 个答案: