Кладка JS - Как центрировать элементы сетки во втором ряду

Question

Я работаю с этим сайтом: http://genesis.ecoverbuddy.com/

Я кладка для категорий электронной коммерции продукции для гибкой функции. Теперь мне нужно сделать второй ряд, чтобы плавать в центре.

Вот ссылка снимок: http://clip2net.com/s/5M9qpK

Q: Что лучший способ осуществить это? Было бы хорошо, если бы гибкая функция поддерживалась в меньших размерах экрана.

Вот мой JQuery код:

jQuery(window).on('load', function(){ 
var $ = jQuery; 
/* Masonry */ 
var $container = $('.woo-cat ul.products'); 
// initialize 
    $container.masonry({ 
      columnWidth:10, 
      itemSelector: '.product-category', 
      isAnimated: true, 
      isFitWidth: true 
    }); 
$container.masonry('reloadItems'); 
}); 

Answer 1

Лучший способ осуществить это? Не используйте кладки вообще - просто используйте CSS. Вам повезло, потому что все ваши изображения 300x300. Масонство обычно используется для наилучшего размещения предметов в сетке, когда они имеют различные размеры и традиционно плавно устраивает их неловко.

Простой пример того, чтобы быть отзывчивым и по центру здесь:

http://jsfiddle.net/aF7tP/

* { margin:0; padding:0; } 
ul { list-style: none; text-align: center; font-size: 0;} 
li { display: inline-block; font-size: 24px; position: relative; padding: 8px;} 
img { display: block; margin: 0 auto; } 
span { position: absolute; bottom:8px; left:8px; right:8px; padding: 8px; background: rgba(0,0,0,0.4); color: #fff; } 

Ваш точный CSS будет продиктован именно то, что вы хотите, но не пропустите точку на вынос - Дон» t используйте масонство, это не нужно (и вредно) для ваших конкретных требований.