html - 在 CSS 中水平对齐 float 元素

Question

1. 我有无限/未绑定(bind)数量的 DIV 标签向左浮动。

2. 随着浏览器大小的调整，DIV 标签换行到下一行。

3. 因为 DIV 标签根据屏幕右侧是否有足够的间距来换行，当它们换行时，会在屏幕右侧留下很大的空间。

4. 因此，如果 DIV 为 32x32，则屏幕右侧将留下 32x32 的空间。

在这种情况下，我希望父 DIV 将内容居中，因此如果换行后右侧有 32px 的空间，它会调整子内容在右侧有 16px左侧和右侧 16px。

例如，如果内容不居中，屏幕将如下所示:

[DIV] [DIV] [DIV] [DIV]..GAP.|

[DIV] <-Wrapped.................|

我想将这些 DIV 放在父级中，这样当 DIV 被包装时，内容将如下所示:

.....[DIV] [DIV] [DIV] [DIV].....| <- Centered, but still floating left.

.....[DIV]..............................| <- Parent is centered, but DIV is still floating left.

仍然允许换行，但随着浏览器水平缩小或扩大，父 DIV 会自动调整子 DIV 的内容居中。

我怎样才能做到这一点？

Answer 1

正如您所描述的那样，您无法做到。您可以将所有 div 设置为 display:inline-block 而不是 float left，然后将它们全部放在一个带有 text-align center 的大包装 div 中。不过，这将使跳下一行的 div 居中而不是左对齐。

或者，您可以设置一个包装器 div，将其宽度设置为页面的百分比，以及最小像素宽度，然后将边距设置为 0 auto。像这样的东西:

div.wrapper {width:90%; min-width:800px; margin: 0 auto;}

我怀疑这会按照您的想法行事，但我还没有测试过。希望这能激发一些想法!