Понимание классов тяги - центрирующие элементы

Question

Таким образом, следующий код включен в мой онлайн-магазин.

Я думаю, что он предназначен для перемещения предметов влево, как сказано ниже и меняется в зависимости от количества предметов.

В настоящее время у меня есть один элемент и хотелось бы, чтобы он был центром.

Каков наилучший способ сделать это, не разрушая какой-либо отзывчивый код и не понимая этот метод?

/*============================================================================ 
    PULL 
    - Pull classes, to move grid items back to the left by certain amounts 
==============================================================================*/ 
@mixin pull-setup($namespace: "") { 
    /* Whole */ 
    #{$class-type}pull--#{$namespace}one-whole  { right:100%; @include silent-relative(); } 

    /* Halves */ 
    #{$class-type}pull--#{$namespace}one-half  { right:50%; @include silent-relative(); } 

    /* Thirds */ 
    #{$class-type}pull--#{$namespace}one-third  { right:33.333%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-thirds  { right:66.666%; @include silent-relative(); } 

    /* Quarters */ 
    #{$class-type}pull--#{$namespace}one-quarter  { right:25%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-quarters { @extend #{$class-type}pull--#{$namespace}one-half; } 
    #{$class-type}pull--#{$namespace}three-quarters { right:75%; @include silent-relative(); } 

    /* Fifths */ 
    #{$class-type}pull--#{$namespace}one-fifth  { right:20%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-fifths  { right:40%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}three-fifths { right:60%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}four-fifths  { right:80%; @include silent-relative(); } 

    /* Sixths */ 
    #{$class-type}pull--#{$namespace}one-sixth  { right:16.666%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-sixths  { @extend #{$class-type}pull--#{$namespace}one-third; } 
    #{$class-type}pull--#{$namespace}three-sixths { @extend #{$class-type}pull--#{$namespace}one-half; } 
    #{$class-type}pull--#{$namespace}four-sixths  { @extend #{$class-type}pull--#{$namespace}two-thirds; } 
    #{$class-type}pull--#{$namespace}five-sixths  { right:83.333%; @include silent-relative(); } 

    /* Eighths */ 
    #{$class-type}pull--#{$namespace}one-eighth  { right:12.5%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-eighths  { @extend #{$class-type}pull--#{$namespace}one-quarter; } 
    #{$class-type}pull--#{$namespace}three-eighths { right:37.5%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}four-eighths { @extend #{$class-type}pull--#{$namespace}one-half; } 
    #{$class-type}pull--#{$namespace}five-eighths { right:62.5%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}six-eighths  { @extend #{$class-type}pull--#{$namespace}three-quarters; } 
    #{$class-type}pull--#{$namespace}seven-eighths { right:87.5%; @include silent-relative(); } 

    /* Tenths */ 
    #{$class-type}pull--#{$namespace}one-tenth  { right:10%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-tenths  { @extend #{$class-type}pull--#{$namespace}one-fifth; } 
    #{$class-type}pull--#{$namespace}three-tenths { right:30%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}four-tenths  { @extend #{$class-type}pull--#{$namespace}two-fifths; } 
    #{$class-type}pull--#{$namespace}five-tenths  { @extend #{$class-type}pull--#{$namespace}one-half; } 
    #{$class-type}pull--#{$namespace}six-tenths  { @extend #{$class-type}pull--#{$namespace}three-fifths; } 
    #{$class-type}pull--#{$namespace}seven-tenths { right:70%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}eight-tenths { @extend #{$class-type}pull--#{$namespace}four-fifths; } 
    #{$class-type}pull--#{$namespace}nine-tenths  { right:90%; @include silent-relative(); } 

    /* Twelfths */ 
    #{$class-type}pull--#{$namespace}one-twelfth  { right:8.333%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}two-twelfths { @extend #{$class-type}pull--#{$namespace}one-sixth; } 
    #{$class-type}pull--#{$namespace}three-twelfths { @extend #{$class-type}pull--#{$namespace}one-quarter; } 
    #{$class-type}pull--#{$namespace}four-twelfths { @extend #{$class-type}pull--#{$namespace}one-third; } 
    #{$class-type}pull--#{$namespace}five-twelfths { right:41.666%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}six-twelfths { @extend #{$class-type}pull--#{$namespace}one-half; } 
    #{$class-type}pull--#{$namespace}seven-twelfths { right:58.333%; @include silent-relative(); } 
    #{$class-type}pull--#{$namespace}eight-twelfths { @extend #{$class-type}pull--#{$namespace}two-thirds; } 
    #{$class-type}pull--#{$namespace}nine-twelfths { @extend #{$class-type}pull--#{$namespace}three-quarters; } 
    #{$class-type}pull--#{$namespace}ten-twelfths { @extend #{$class-type}pull--#{$namespace}five-sixths; } 
    #{$class-type}pull--#{$namespace}eleven-twelfths { right:91.666%; @include silent-relative(); } 
} 

Любая помощь будет оценена, я попытался теги центра и изменения проценты, хотя он не работает и изменяет размер тоже.

спасибо.

Добавлено HTML:

<div class="grid-uniform product-grid"> 

<div class="grid-item medium--one-third large--one-third"> 

    <a href="/products/50g-alba-cinnamon" class="product-grid-item text-center"> 
    <div class="product-grid-image" style="height: 181px;"> 
     <div class="product-grid-image--centered"> 


     <img src="//cdn.shopify.com/s/files/1/0834/6311/products/image002_large.jpg?v=1429679422" alt="50g of pure Alba Cinnamon"> 
     </div> 
    </div> 


     <p> 

      <span class="h6 color-secondary">50g of pure Alba Cinnamon</span><br> 

$16  
     </p> 
    </a> 
</div> 
</div> 

Answer 1

Это было сказано уже, но это не CSS. Вы не должны касаться этого файла, если не знаете, что делаете.

В любом случае, для рабочего примера вы также должны предоставить свой html.

Если вам нужно только переместить 1 элемент, вы можете добавить встроенные стили непосредственно в свой html, чтобы он был простым.

<div class="..." style="insert here css styles"> 
</div>