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。

可以将基础中的动态不均匀添加列集中在一行中吗？

1 个答案: