Amass

Aligning Google Adsense Boxes

August 22nd, 2007 Luke

I’ve been building the template for a new project lately, and it will have Adsense built into the sidebar for users who aren’t logged in. However, having the Adsense box aligned to the left side of the sidebar just looked…ugly. I wanted the Adsense box centered within the sidebar.

After googling, I was told to use absolute positioning to align my Adsense box. The only problem is, I couldn’t seem to actually center the box using absolute positioning.

Then I tried floating the box. That didn’t work either; how do you float something and center it?

Then I stumbled upon the ever-so-handy text-align attribute. I put my Adsense code inside a div:

<div id='ads'> <!-- Adsense Code Here --> </div>

And then put this inside my CSS:

div#ads {text-align:center}

And…voila! A centered google adsense box, with minimal extra markup.