CSS: How to Center Floated Objects?

So, you're thinking, maybe:

I have these boxes inside a big box.
Or boxes inside of a table cell.
And they don't line up right in a pleasant way.
I want the layout to be more reponsive.

Problem:

aardvark

bird

cat

dog

eagle

And so maybe you decide to have them layout in an automatic fashion using float, like this:

aardvark

bird

cat

dog

eagle

aardvark

bird

cat

dog

eagle

It's not horrible, but it could look better, right?

So, how do you get a float to center inside the box?

You don't.

You change it
from: "float:left;"
to "display: inline-block;"
And do a "text-align:center; on the surrounding <div> or other surrounding element.

aardvark

bird

cat

dog

eagle

aardvark

bird

cat

dog

eagle