如何将这个“x”数量的正方形网格居中？答案

【问题标题】：How do I centre this grid of 'x' amount of squares?如何将这个“x”数量的正方形网格居中？
【发布时间】：2016-04-07 19:52:42
【问题描述】：

我目前正在制作一个网站，在其中输入“n”个正方形，然后在页面上显示该数量的正方形网格。问题是，当浮动 div 时，行尾会留下一个小间隙，从而使正方形网格不对称。

JavaScript 是设置每个正方形大小的代码。 PHP 是用户输入框和回显该数量框的半伪代码。

如何使网格看起来居中？我明白这可能很难掌握

<body>
<div class="navbar"></div>
<div class="container">
    <div class="box-container">
        <?php
            $NumberOfBoxes = USER INPUT AMOUNT
            for ($count = 1; $count <= $NumberOfBoxes; $count++) {
                echo "<div class='box'></div>";
            }
        ?>
    </div>
</div>
<script>
    $(window).load(function() {
        var h = $(".container").height();
        var w = $(".container").width();
        if (w > h) {
            var NumberOfBoxes = <?php echo json_encode($NumberOfBoxes); ?>;
            var BoxSize = h * (1/Math.sqrt(NumberOfBoxes));
            $(".box").width(BoxSize);
            $(".box").css({
            "padding-bottom": BoxSize
            });
        } else {
            var NumberOfBoxes = <?php echo json_encode($NumberOfBoxes); ?>;
            var BoxSize = w * (1/Math.sqrt(NumberOfBoxes));
            $(".box").width(BoxSize);
            $(".box").css({
            "padding-bottom": BoxSize
            });
        }
    });
</script>

CSS

    html, body {
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #d9d9d9;
}

.navbar {
    height: 50px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background-color: black;
}

.container {
    height: Calc(100% - 50px);
    width: 80%;
    padding: 0px;
    margin: auto;
}

.box-container {
    height: 89%;
    width: 100%;
    margin-top: 6%;
}

.box {
    float: left;
    width: 0px;
    padding-bottom: 0px; /* = width for a 1:1 aspect ratio */
    background-color: #1E1E1E;
}

【问题讨论】：

你能用css标记更新你的问题吗？

标签： javascript php html css

【解决方案1】：

.container{
    text-align:center
}
.box{
    display:inline-block
}

这可能对你有用。

【讨论】：