Возможно ли центрировать динамические неравномерные добавленные столбцы в фундаменте в одной строке?

Question

Im пытается решить небольшую, но раздражающую проблему, которую я получил. То, что я не нашел решение даже в том случае, когда я googled ...

Я хочу центрировать «неизвестные» неравномерные столбцы номера в основании. Я не могу понять, как это сделать ... Поскольку это неизвестно, я не знаю, когда использовать смещение или правый столбцов.

I "Codepenned" a example of the problem.

Эта проблема "solveable" в Bootstrap по крайней мере ...

Вот пример моей проблемы, если CodePen dosen't работы.

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 Я забрал ряд и col-размеры, измеряя размер большой колонки, используемый только для некоторых авто-стилей. я добавил обертку, как это:

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.