在屏幕上居中浮动块答案

【问题标题】：Center a block of floats on the screen在屏幕上居中浮动块
【发布时间】：2016-05-05 11:21:01
【问题描述】：

这是我想要的效果：我有一组图块，我想在屏幕上以网格的形式排列，在给定屏幕尺寸的情况下，尽可能多的图块。然后，我希望整个块居中，即在安装尽可能多的瓷砖后剩余的任何空间，我想要将一半左右分开。或者，如果没有足够的瓷砖来填充宽度，我希望将剩余空间分开。

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

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

在较窄的屏幕上：

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

更窄：

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

等等

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

我可以通过将它们设置为浮动块或内联块来轻松地包裹它们。我想我可以将它们包装在一个更大的 div 中，然后将该 div 居中在一个外部 div 中。但是没有。

如果我让它们浮动，只要它们都放在一排，它就可以居中。但是一旦需要两排，它们都会向左齐平。看起来 CSS 的布局引擎计算行的宽度，就好像没有换行一样，用它来计算居中，使左右边距为 0，然后在内部块内换行。

我最接近的是使它们成为内联块并将 text-align: center 放在外部块上。但是，最后一行在第一行下方居中，而不是在第一行下方左对齐。

请参阅http://jsfiddle.net/vaLLsudh/ 了解最后一个几乎是解决方案。

【问题讨论】：

没有办法像你描述的那样给块一个灵活的宽度。你可以给一个<div> 一个max-width 并将其居中，仅此而已。
如果我得到你的 Q 正确...我认为你应该使用 JS。
您可以针对不同的屏幕尺寸使用@media 部分。
@Also 是的。每像素数以千计的@media...
CSS when inline-block elements line-break, parent wrapper does not fit new width 的可能重复项。如果包装器更喜欢 5 块宽但可用空间较少，则其宽度将是全部可用空间，而不是行间内容的最大宽度。

标签： html css

【解决方案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;
    }
}

【讨论】：

我最终用 JavaScript 来做这件事。我会宣布你是赢家，因为这个解决方案有效，而且我总是更喜欢有效的解决方案而不是那些无效的解决方案。这有点难看，因为在我的例子中，图块实际上是 240 像素宽，假设我们允许 2000 像素宽的屏幕，我们需要 8 个媒体查询。这似乎有点多，但并非不可能。

【解决方案2】：

ChristopherThomas 的回答很有道理。但我最终用 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");

}

仅仅为了让一个块居中，这似乎是一大堆代码。如果有人可以告诉我一个更简单的方法，我很感兴趣。

【讨论】：