javascript - 根据编号将内部 div 居中对齐

Question

我在另一个 div 中有 4 个 div 元素。从应用程序中，用户可以选择要显示多少个 div。

每当他选择少于 4 个时，我希望剩余的 div 与中心对齐。我设法用 Jquery 做到这一点，它可以用 css 来完成吗？下面是我的 jquery 代码，问题是当页面加载时，用户可以在几毫秒内看到 div 未对齐。

我不想这样，我希望 div 在页面加载(刷新)后立即对齐

HTML

<div id="alignColumns">
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div>    
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div>               
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div> 
     <div class="col-lg-3 wow zoomIn" style="padding: 0;"></div> 
</div>

j查询

alignCols = function () {
    if (($("#alignColumns > div").length) == 3)
    {
        $("#alignColumns").css('margin-right','-133px')
    }
    else if (($("#alignColumns > div").length) == 2)
    {
        $("#alignColumns").css('margin-right', '-250px')
    }
    else if( ($("#alignColumns > div").length) == 1)
    {
        $("#alignColumns").css('margin-right', '-390px')
    }
};
window.onload = function () {
    alignCols();
};

工作 Fiddle

Answer 1

我会通过在组合中添加 flex-box 来完成您所描述的，我个人将它与 bootstrap 结合使用并且效果非常好。

这是一个 jsFiddle，其中演示了不使用 jQuery 的强制排序和流体居中。

jsFiddle

下面的代码演示了如何将 flex-box 添加到元素中。确保在 Bootstrap 之后放置它，否则它可能无法工作。最坏的情况是您可以添加一个 !important 标签，但这样做会遭到社区的强烈反对。

.flex-container {
    display: -webkit-flex;
    display:    -moz-flex;
    display:     -ms-flex;
    display:      -o-flex;
    display:         flex;
    -webkit-justify-content:center;
    -moz-justify-content: center;
    justify-content: center;
}

.flex-item {
// add options
}

.one {
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}
.two {
    -moz-order: 2;
    -webkit-order: 2;
    order: 2;
}
.three {
    -moz-order: 3;
    -webkit-order: 3;
    order: 3;
}
.four {
    -moz-order: 4;
    -webkit-order: 4;
    order: 4;
}   

有关 flex box 的出色且易于理解的资源:CSS-Tricks.