可以在一排基础上将动态不均匀添加的列居中吗？

Question

我正在尝试解决我遇到的一个小问题，但很烦人。即使我用谷歌搜索也没有找到解决方案...

我想在基础中居中 "unknown" 个奇数列。我不知道该怎么做... 由于未知，我不知道何时使用偏移或正确的列大小。

I "Codepenned" a example of the problem.

这个问题至少 Bootstrap "solveable"...

如果 CodePen 不工作，这是我的问题示例。

HTML

<div class="row">
  <div class="small-12 small-centered large-centered columns blue-container">
    <div class="row">
      <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
      <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
      <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
    </div>
  </div>
</div>
<hr/>
<div class="row">
  <div class="small-12 small-centered large-centered columns blue-container">
    <div class="row">
      <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
      <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
      <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
       <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
       <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
       <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
       <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
    </div>
  </div>
</div>
<hr/>
<div class="row">
  <div class="small-12 small-centered large-centered columns blue-container">
    <div class="row">
       <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
       <div class="small-12 medium-4 large-3 columns test">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
    </div>
  </div>
</div>

CSS

.blue-container{
  background-color:blue;
}

.test{
 background-color:green; 
}

.col-wrapper{
  margin-left:auto!important;
  margin-right:auto!important;
  /*Is this something to use maybe?*/
}

Answer 1

我想我通过这个解决方案找到了答案：CSS-tricks。

所以我所做的是：CodePen 我去掉了行和列的大小，测量了大列的大小，只对一些自动样式使用了小的。我添加了这样的包装器：

SCSS

.center-blocks {
text-align: center;

    &:before {
        display: inline-block !important;
        height: 100%;
        vertical-align: middle;
    }
}

.centered-block {
    display: inline-block !important;
    vertical-align: middle;
}

而 HTML 看起来像这样：

<div class="row">
  <div class="small-12 small-centered large-centered columns blue-container">
    <div class="center-blocks">
      <div class="small-3 centered-block">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
      <div class="small-3 centered-block">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
      <div class="small-3 centered-block">
        <img src="http://placehold.it/500x250&text=[Center us without offset or adding cols]">
      </div>
    </div>
  </div>
</div>

你可以在这里看到结果：CodePen。

可以在一排基础上将动态不均匀添加的列居中吗？

Possible to center dynamic uneven added columns in foundation in one row?

html

css

zurb-foundation

center

grid-layout