Masonry JS - 如何将第二行中的网格元素居中

Question

我正在使用这个网站：http://genesis.ecoverbuddy.com/

我在电子商务产品类别中使用砖石来实现响应式功能。 现在，我需要使第二行浮动在中心。

问：最好的实现方式是什么？ 如果在较小的屏幕尺寸中保持响应功能，那就太好了。

这是我的 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 将完全由您想要的内容决定，但不要错过要点 - 不要使用 Masonry，它对于您的特定要求是不必要的（而且是有害的）。