Jquery 以百分比宽度集中div上的项目

我在我的网站上有一种“马赛克”，他在一个div里面，div的宽度是用百分比来衡量的

问题 如何将内容（更具体地说，是马赛克）集中在宽度以百分比衡量的div中

代码 HTML:

<div class="main-container">
    <div class="container">
        <div class="right">
            Some menu.
        </div>
        <div class="left">
            <ul class="list">
                <li>Showcase #1</li>
                <li>Showcase #2</li>
                <li>Showcase #3</li>
                <li>Showcase #4</li>
                <li>Showcase #5</li>
                <li>Showcase #6</li>
            </ul>
        </div>
    </div>
</div>

.main-container {
    background-color: #c19fe2;
    width: 95%;
    margin: 0 auto;
}

.container {
    position: relative;
}

.left {
    background-color: #ebd6ff;
    width: 300px;
    height: 200px;
}

.left li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
}

.right {
    float: right;
    width: 270px;
    height: auto;
    padding: 15px;
    background-color: #8863ac;
}

/** Packery (jQuery Grid like Masonry/Prototype) **/
$(function() {
    var $container = $(".left");
    // initialize
    $container.packery({
        itemSelector: "li",
        gutter: 5
    });
});


/** Centralize the main container **/
function calculateMainContainerWidth() {
    $realWidth = $(".main-container").width() - $(".right").outerWidth(),
    $containerContent = $(".left");

    $containerContent.css("width", $realWidth);
}

$(window).on("resize", function() {
    calculateMainContainerWidth();
});

calculateMainContainerWidth();

jQuery/JavaScript:

<div class="main-container">
    <div class="container">
        <div class="right">
            Some menu.
        </div>
        <div class="left">
            <ul class="list">
                <li>Showcase #1</li>
                <li>Showcase #2</li>
                <li>Showcase #3</li>
                <li>Showcase #4</li>
                <li>Showcase #5</li>
                <li>Showcase #6</li>
            </ul>
        </div>
    </div>
</div>

.main-container {
    background-color: #c19fe2;
    width: 95%;
    margin: 0 auto;
}

.container {
    position: relative;
}

.left {
    background-color: #ebd6ff;
    width: 300px;
    height: 200px;
}

.left li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
}

.right {
    float: right;
    width: 270px;
    height: auto;
    padding: 15px;
    background-color: #8863ac;
}

/** Packery (jQuery Grid like Masonry/Prototype) **/
$(function() {
    var $container = $(".left");
    // initialize
    $container.packery({
        itemSelector: "li",
        gutter: 5
    });
});


/** Centralize the main container **/
function calculateMainContainerWidth() {
    $realWidth = $(".main-container").width() - $(".right").outerWidth(),
    $containerContent = $(".left");

    $containerContent.css("width", $realWidth);
}

$(window).on("resize", function() {
    calculateMainContainerWidth();
});

calculateMainContainerWidth();

要调试，请使用FiddleJS

技术细节

calculateMainContainerWidth

函数工作正常-它正在计算容器的宽度，但我不能使用

margin:0 auto以完全集中。当然，这背后有一个逻辑冲突，阻止我集中精力，但我想知道是什么

工具书类
这幅马赛克是用手工制作的

进展
看看我自己的答案-解决方案就在那里。
我不确定为什么需要所有的JavaScript和jQuery来将
水平居中放置在容器
中。我通常只选择利润率如下的div：

#centeredContent
{
    margin: 0 auto;
}

部分解
我通过如下调整CSS找到了对中问题的部分修复：

.left {
    background-color: #ebd6ff;
}
ul.list {
    margin: 0;
    padding: 0;
    max-width: 330px;
    margin: 0 auto;
}
ul.list li {
    width: 50px;
    height: 300px;
    background-color: red;
    list-style: none;
    margin: 0; 
    padding: 0;
}

诀窍是根据您期望的最大列数（本例中为5 x 55px），为
ul.list
提供一个
max width

使用最大宽度，并使用
边距：0 auto
，列表将在
左侧的
容器中居中

此外，它还有助于将边距和填充归零，因为Packer使用绝对定位来放置元素

最后，将packery方法应用于
.list
，而不是
.left

演示小提琴：

限制：一旦窗口大小缩小，使
元素开始形成两行或更多行，右侧将有一些额外的空白。此时，布局由Pacery bin布局算法确定，并且没有太多的
CSS可以做到这一点，因为
元素的位置绝对超出了常规内容的流动范围，常规的居中技巧不起作用。
我找到了一个更简单的解决方案

我使用了，经过一些研究，我发现他没有一个集中的布局。然后，我毫不犹豫地切换到，由同一个创造者

不幸的是，起初我没有找到解决办法。起初，似乎同位素没有一个集中资源，直到我发现，由，集中和排水沟一起工作。在这一切之后，我的马赛克居中了

我想向那些为我寻求解决方案的人道歉，但无论哪种方式，对于那些将来有同样问题的人来说，这都是另一种选择。谢谢大家!
 在看到您的编辑之前，我发布了我的答案。我会尽快更新我的答案。没问题，兄弟。我忘了指定细节-很抱歉。问题的根源是jQuery模块使用绝对定位将
元素放置在马赛克模式中。元素从左到右放置在包含块的完整范围内，因此通常的
边距：0 auto
将不起作用。您几乎需要一些额外的JavaScript来提供帮助。@MarcAudet噢，谢谢您的解释。那么，你能详细介绍一下这个“附加JavaScript”吗？我正在看它，问题是Packer没有设置父容器的computed with，即，
.list
你好，Cameron。谢谢你的加入。所以，我也喜欢使用
margin:0auto，但马赛克没有集中，我不知道为什么。要了解更多细节，请参阅小提琴。马克，非常感谢你的参与，但我昨天找到了一个更简单的解决方案。很抱歉=（@chiefGui没问题！重要的是你分享了你的最终解决方案，这将有助于其他人。祝你一切顺利！我读过Packer的文章，他们有一个名为
stamped
的选项，根据你边栏的性质，这个选项可能会起作用。“取决于边栏的性质”-“取决于”这就是问题所在。有了扩展，我可以平静地玩侧边栏。无论如何，再次感谢您的加入，@MarcAudet！=）