Set an advertisement script in html to display it in the center


 Source of this article: https://blog.csdn.net/weixin_35698659/article/details/117861461

Method 1 - Modify directly in the AdSense code. Example:

style="display:inline-block;width:300px;height:250px"data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"data-ad-slot="xxxxxxxxxx">
(adsbygoogle = window.adsbygoogle || []).push({});
修改为
style="display:block;width:300px;height:250px;margin:auto"data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"data-ad-slot="xxxxxxxxxx">
(adsbygoogle = window.adsbygoogle || []).push({});

The display:inline-block is changed to display:block and margin:auto is added to center the advertisement.
Before modification, the advertisement is centered on the left
. After modification, the advertisement is centered
. Method 2 – Modify the CSS of the surrounding div. Example:
The amp ad itself cannot carry css, and only the periphery can be modified. Add a div outside the original amp ad code:

type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
>

Then define this in the CSS file

.left_column {
display: flex;
justify-content: center;
}

The advertisement can be centered. This method is actually more general than the first method. It is effective for amp advertisements or ordinary web advertisements in popular browsers, but it is invalid in very old browsers such as IE9.

Post a Comment

Previous Post Next Post