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

Question

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

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

I "Codepenned" a example of the problem.

这个问题至少在 Bootstrap 中是“可以解决的”……

如果 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 .