问题

如何在宽度以百分比衡量的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>

CSS：

.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;
}

的jQuery / JavaScript的：

/** 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

Just click here to go to the Fiddle.

技术细节

calculateMainContainerWidth函数工作正常 - 它正在计算我的容器的宽度，但我不能使用margin: 0 auto;来完美地集中。当然，这背后存在一个逻辑冲突，阻碍了我的集中，但我想知道是什么。

参考

马赛克由Packery, a Metafizzy's plug-in制作。

进展

看看我自己的答案 - 解决方案就在那里。

Answer 1

我为我的头痛找到了一个更简单的解决方案。

我正在使用Packery's plugin, by Metafizzy，经过一些研究，我发现他本身并没有集中布局。然后，我毫不犹豫地切换到Isotope，由同一个创作者Metafizzy。

不幸的是，起初我没有找到解决方案。起初，似乎同位素没有集中资源，直到我找到由this extension创建的Beau Smith，它集中并与排水沟一起工作。毕竟，我把马赛克放在了中心位置。 =）

我想向那些为我寻求解决方案的人道歉，但无论哪种方式，它都将成为未来遇到同样问题的人的替代方案。谢谢！

Answer 2

部分解决方案

我通过如下调整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;
}

诀窍是根据您期望的最大列数给max-width ul.list（在这种情况下为5 x 55px）。

使用最大宽度并使用margin: 0 auto时，列表将以.left容器为中心。

此外，由于packery使用绝对定位来放置元素，因此有助于将边距和填充清零。

最后，将填充方法应用于.list而不是.left。

演示小提琴：http://jsfiddle.net/audetwebdesign/Nsm2Z/

限制：一旦寡妇尺寸缩小以使<li>元素开始形成两行或更多行，右侧会有一些额外的空白区域。此时，布局是由packery bin-layout算法确定的，并没有那么多 CSS可以做，因为<li>元素绝对位于常规内容的流程之外，常规的居中技巧将不起作用。

Answer 3

我不确定为什么你需要所有的JavaScript和jQuery来将<div>水平居中放在容器<div>中。我通常会选择一个像这样的边缘的div：

#centeredContent
{
    margin: 0 auto;
}

使用百分比宽度集中div上的项目

问题

代码

调试，FiddleJS

技术细节

参考

进展

3 个答案:

部分解决方案