javascript - 如何将包含左浮动元素的元素居中？

Question

这个问题已经有答案了:

How do I center floated elements? (12 个回答)

Flexbox: center horizontally and vertically (14 个回答)

已关闭 3 年前。

我有一堆左浮动卡片状元素，具有设置的宽度和高度像素。每个元素都足够大，当右侧没有足够的空间容纳另一个元素时，它看起来会很不合适，我会在右侧得到一个很大的空白。我想均匀两边的空白。

使用简单的左浮动，它看起来像这样:

[---][---][---]--
[---][---][---]--
[---][---][---]--
[---][---][---]--
[---][---]-------

我想要的是这样的:

-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---]------

或者这个:

-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
-[---][---][---]-
---[---][---]----

如何使用 CSS 实现此目的，如果不可能，是否有任何简单的方法可以使用 JavaScript 实现此目的？

Answer 1

您可以对卡片使用 display: inline-block 来代替，并在父级中使用 text-align: center。

.card {
  display: inline-block;
}

.parent {
  text-align: center;
}

这样，卡片的工作方式就像换行、居中的文本一样。