Question

我有一组缩略图，我希望在列落下时居中，是否有一种简单的方法可以做到。

这是一个例子 http://turnpost.turnpostinteractive.com/all-work/

这是jquery

function initIsotope() {
    // Init Portfolio masonry
    var $container = $('.portfolio-container');
    $container.isotope({
        resizable: false,
        masonry: {
            columnWidth: 291,
            gutterWidth: 10
        }
    });

    $(".filter-portfolio li a").click(function(e){
        e.preventDefault();
        $(this).closest('.filters').find('a').removeClass('selected');
        $(this).toggleClass('selected');


        var selector = $(this).attr('data-filter');
        $('.portfolio-container').isotope({
            filter: selector,
            masonry: {
                columnWidth: 291,
                gutterWidth: 10
            }
        }, function() {
            // Refresh waypoints
            $.waypoints('refresh');
        });

        return false;
    });

  $('.noclick').off('click');

    // Init Portfolio masonry
    $('.entries-container').isotope({
        itemSelector : '.blog-entry'
    });
}

function reLayoutIsotope() {
    $('.isotope').isotope( 'reLayout' );
}

Answer 1

你有权访问CSS吗？他们有确切的宽度或百分比吗？如果你周围有一个conatiner，你可以绝对的位置。然后，给容器一个宽度（任何都可以。）将容器放置在负宽度的一半。然后给它留下50％的保证金;示例如下。

HTML

<div class="container">
    ...stuff
</div>

的CSS

.container {position:absolute; left:-300px; width:600px; margin-left:50%;}

这将使容器从页面左侧移动50％。然后它将它移回容器宽度的一半左侧。将元素的中间位置放在页面的中间位置。

希望它有所帮助。

Answer 2

如果你希望它在屏幕上显示死角，可以使用这样的css：

.portfolio-container {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 1000px; /* change this to how large you want it to be width-wise */
}

需要帮助集中我的同位素容器

2 个答案: