Michael R Michael R - 5 months ago 24
CSS Question

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

Im trying to resolve a small but irritating problem I got. That I haven´t found a solution on even when I googled...

I want to center a "unknown" uneven number columns in foundation. I cant figure out how to do it...
Since it´s unknown I dont know when to use offset or the right columnsize.

I "Codepenned" a example of the problem.

This problem is "solveable" in Bootstrap at least...

Here is a example of my problem if CodePen dosen´t work.

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

Think I found a answer by this solution: CSS-tricks.

So what I did was this: CodePen I took away row and col-sizes, measured the sise of the large column, used only small for some auto-styles. I added a wrapper like this:

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;
}

And the HTML Looks like this:

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

You can see the result here:CodePen.