If there is any available space left next to the ads, it may be occupied by other HTML elements. This problem usually occurs when you place AdSense ads in-between post content or in the header section of your website.
The left aligned ads not only distort the layout of your website but they also affect the user experience and can cause accidental clicks. Here we have shared two simple methods which can help you to center align AdSense ads on your website.
Note: These methods can be applied to both Blogger and WordPress powered websites/blogs.
Table of Contents
How to center align AdSense ads
One of the methods to align AdSense ads in the center is by using CSS language. CSS has a property named text-align which allows you to align the content of HTML tag in the center, right, or left position. Another way is to use <center> HTML tag. Let’s see how to implement them!
1. Place AdSense code in a new <div> container
In this method, we will place the AdSense ad code inside a new <div> HTML container and add the CSS text-align property in its style tag. Here’s a sample code –
<div style="clear: both; text-align: center; margin: 10px;"> <!--Your AdSense code here--> </div>
You have to place your AdSense ad code inside the <div> container. As you can see in the above sample code, we have added the text-align: center; CSS property in the style tag of the <div> container which will align all its child elements/content in the center.
We have also added margin CSS property in the above code which will apply margin space around AdSense ads. If you don’t want to add the margin, simply remove margin:10px; from the style tag.
Note: In case, you want to align AdSense ads in the left or right side, then you can change the value of text-align CSS property to left or right.
2. Place AdSense ad code in <center> HTML tag
HTML also has a special kind of tag named <center> which can help you to center align AdSense ads on your website. Here’s how you can use this tag –
<center> <!--your AdSense code here --> </center>
Make sure to replace <!–your AdSense code here–> with your AdSense ad code and then you can add it anywhere on your website. This method is quite simple and straightforward.
Does the above methods violate Adsense Policies?
Some of you might be curious to know that if the above methods are safe to use. As you are not modifying the AdSense ad code in any way, so it doesn’t violate any AdSense Program policies. You are only customizing the position of the AdSense ads.
So these are two simple methods which can help you to center align AdSense ads in your posts or anywhere on your website/blog. We hope you find this guide helpful. If you want to ask something related to this tutorial, feel free to share it in the comment section below.
In #1, the CSS should say "text-align: center" but you have "text-align: left"
Thanks a lot man. This worked