Aligning Google ad units to the center

Easiest ways to align you Google ads to center of the container without much coding – CSS as well as HTML solutions to center align AdSense units.

Some sites center align Google ads to perform better with AdSense. It can also be a part of placement experiments to know what works well. If you too are experimenting with ad placements on your site, and facing difficulties in aligning AdSense ad units to the center, in the middle of the container, this short tutorial will help you to accomplish that in easiest steps.

Ads of what size can be aligned to center?

It depends on the width of the ad container (the division containing the ad). It may sound a bit confusing, let me explain this with an example. Say you want the ad alignment done in the post area with a width of 600 pixels (600px). Now, you can center align only those ads that have a width less than 600px; i.e. 336×280, 300×250, 300×600, 250×250, 200×200, 468×60 and lesser.

Example of center aligned Adsense ad unit

Confused? Don’t worry, you need not to think much about that, just presume: if the ad width is lesser than container area, you may continue aligning the ad.

Aligning the ad unit to center

There are two ways to do that. The first one is pretty simple, just wrap your ad code inside <center></code> tags. More descriptively:

<center>
    Your AdSense ad code goes here...
</code>

However, this method is outdated and not compatible to HTML5 as the <center> is deprecated in HTML5.

The second way is more precise and HTML5 compatible. We’ll be center aligning the ads with the help of CSS, thus not making use of the outdated <center> tag. The trick lies in wrapping the ad code inside the <div></div> tag with some CSS style attributes to it. Below is the code that we implement:

<div style="text-align: center; margin: 5px 0;">
    Your AdSense ad code goes here...
</div>

Bonus tip: If you have to center align more than 1 ads on your site, better add a CSS class carrying the styles text-align: center; margin: 5px 0; and then use it in the ad wrapping divs. Additionally, you may also add background: #f9f9f9; border: 1px solid #eee; to the CSS class to make the ad wrapper more attractive.

Loading Comments...