How to center element containing left floated elements?

Question

I have bunch of left floated card like elements with set pixel of width and height. Each of the elements are large enough that it looks off when there's not enough space on the right to fit another, I get a big whitespace on the right. I want to even out the white space on the both sides.

With simple left floats, it looks like this:

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

what I instead want is something like this:

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

or this:

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

How can I achieve this with CSS, and if it is not possible, is there any simple way to do this with JavaScript ?

Are you keeping all these child elements inside one parent element? — dhanushkac, Mar 21 '20 at 02:32

score 3 · Accepted Answer · answered Mar 21 '20 at 02:35

3

You can use display: inline-block instead for the cards, and use text-align: center in the parent.

.card {
  display: inline-block;
}

.parent {
  text-align: center;
}

That way, the cards will work just like wrapping, centered text.

answered Mar 21 '20 at 02:35

Jacob

77,566
24
149
228

Simple and best answer! – dhanushkac Mar 21 '20 at 02:48

How to center element containing left floated elements?

1 Answers1