How to center align a BuySellAds ad unit?
Align your BSA ad slots in the middle of the webpage – Semantically correct way to center align BuySellAds units using simple CSS and HTML.
I was experimenting with the placement of BuySellAds slots on the blog and noticed that many popular blogs have center-aligned the 468×60 ad unit. I found this alignment interesting and just implemented it on my blog as well. I’m sharing with you how to center align a BuySellAds slot with simple CSS.
So, lets start. The idea is to wrap the BuySellAds slot code in a division (<div>
) and to style it separately for center alignment in a semantically correct way.
Wrap the code in a div like below in your website’s HTML:
<div class="ca-bsa-wrap"> <!-- BuySellAds Zone Code --> <div id="bsap_12XXXX" class="bsarocks bsap_35XX3XXccXX98XXfbXXd0XXcbXX71XXd"></div> <!-- End BuySellAds Zone Code --> </div>
Save changes.
Note: Don’t forget to add the code of your own slot in the wrapper division. I’ve added sample code here to demonstrate.
We have given the wrapper division a class ca-bsa-wrap
, which we’ll be using in our CSS to align the slot.
Next, add the following piece of CSS code to your website’s stylesheet:
.ca-bsa-wrap { width: 468px; /* Modify this width according to the width of the ad slot */ margin: 0 auto; }
Save the changes. Now open your website and have a look at that BuySellAds slot. It should be center-aligned if you’ve followed the above steps correctly. Hope you found it useful.