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

CSS: Hide <br> break tags using Cascading Style-Sheets

I had a problem today with WordPress. We decided to try adding AdSense code into the middle of our articles since the sidebar is going to be pushed to the bottom of the page on mobile devices.

When I pasted the AdSense code into the Text editor for WordPress, it seemed fine. But after saving it and looking at it a couple of times, I noticed that there were <br /> tags in the middle of the code.

The WYSIWYG WordPress editor we're using (TinyMCE Advanced) breaks Javascript lines apart from <ins> tags. So, it looked something like this:

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-99999" data-ad-slot="99999"></ins><br /><script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>

That was causing an unwanted space to show up above the ad.

How to Hide <br> Tags Using display: none

So, I wrapped it in a <div> with the id "AdSense1":

<div id="AdSense1" style="clear: both;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<br /> <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 250px;" data-ad-client="ca-pub-2662953475244486" data-ad-slot="8854350737"></ins><br />
<script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>
</div>

Finally, I added a couple of lines to my CSS file:

#AdSense1 br {
display:none;
}