Question

这是我想要的效果：我有一组瓷砖，我想在屏幕上的网格中排列，因为屏幕尺寸适合多个。然后，我希望整个块居中，即在安装尽可能多的瓷砖后留下的任何空间，我想要分开左半边和右半边。或者，如果没有足够的瓷砖填充宽度，我希望剩下的空间分开。

例如，让我们将每个图块表示为“XXXX”。我们之间有一些空间，我用“ - ”表示。假设我们有五个瓷砖。因此，在非常宽的屏幕上，我们可能会看到：

---XXXX-XXXX-XXXX-XXXX-XXXX---

在较窄的屏幕上：

--XXXX-XXXX-XXXX-XXXX---
--XXXX------------------

更窄：

-XXXX-XXXX-XXXX-
-XXXX-XXXX------

等

瓷砖是div里面有各种各样的东西。出于此目的，我们可以将它们视为原子单元。

我可以通过制作浮动或内联块来轻松地将瓷砖包裹起来。我以为我可以将它们包装在一个更大的div中，然后将div放在一个外部div中。但没有。

如果我让它们漂浮，只要它们都适合一排，它就会很好地居中。但是一旦它需要两排，它们都会向左冲。看起来CSS的布局引擎计算行的宽度，好像没有包装，使用它来计算居中，使左右边距为0，然后THEN包裹在内部块中。

我最接近的是使它们成为内联块并将text-align：center放在外部块上。但是，最后一行位于第一行的中心，而不是在第一行下面的齐平左侧。

最后几乎找到http://jsfiddle.net/vaLLsudh/解决方案。

Answer 1

我只用了三个块来完成这个，因为我正在开发一种小屏幕但是，这是你的意思吗？

http://jsfiddle.net/vaLLsudh/3/

我使用了一些粗略的值，但你可以正确地进行数学计算。这也假设您总是使用固定宽度的块。

你必须写（最大水平块数 - 1）媒体查询，但这可能不是那么痛苦，这取决于你想要强加什么样的限制。

如果您还使用LESS或SASS预编译CSS，则可能output them as a loop进行单点维护。

.outer {
    text-align: center;
}

.inner {
    display: inline-block;
    width: 700px;
    text-align: left;
}

.tile {
    display: inline-block;
    text-align: left;
    width: 200px;
    height: 100px;
    border: 10px solid black;
    margin: 0 10px 10px 0;
}

@media(max-width:800px) {

    .inner {
        width: 500px;
    }
}

@media(max-width:600px) {

    .inner {
        width: 220px;
    }
}

Answer 2

克里斯托弗·托马斯的回答是有道理的。但我最终用JavaScript做到了：

在一个在加载过程中调用的函数中（不显示整个加载过程，因为这里有一堆不相关的东西，或者在任何理性的宇宙中）：

tileMargins();
$(window).resize(tileMargins);

然后：

function tileMargins() {
  var w1 = $(".outer").width();
  var wtile = $(".inner .tile").outerWidth(true);
  var x = Math.floor(w1 / wtile);
  var margin;
  if (x < 1) {
    margin = 0;
  }
  else {
    var maxx = $(".inner").children().length;
    if (x > maxx) x = maxx;
    margin = (w1 - wtile * x) / 2;
  }
  $(".inner").css("margin-left", margin + "px");

}

这似乎是一个非常多的代码只是为了集中一个块。如果有人能告诉我一个更简单的方法，我很感兴趣。

将一块花车置于屏幕中心

2 个答案: