修改CSS让AdSense广告位置居中的办法

搬瓦工VPS

办法1 – 直接在AdSense代码中修改。

示例:

<ins class="adsbygoogle"     style="display:inline-block;width:300px;height:250px"     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"     data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

修改为

<ins class="adsbygoogle"     style="display:block;width:300px;height:250px;margin:auto"     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"     data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

其中display:inline-block改为display:block、增加margin:auto,就可以让广告居中。

修改前广告居左

修改后广告居中

  方法2 – 修改外围div的CSS。

示例:

amp广告本身不能带css,也只有修改外围,原amp广告代码外面添加一个div:

<div class='left_column'><amp-ad width=300 height=250  type="adsense"  data-ad-client="ca-pub-xxxxxxxxxxxx"  data-ad-slot="xxxxxxxxxx"  >    <div overflow></div></amp-ad></div>

再在CSS文件中定义这个

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

广告就可以居中了,这个办法其实比第一个办法更通用,对amp广告或者普通web广告在现在流行的浏览器中都有效,只是在IE9等很老的浏览器无效。

未经允许不得转载:搬瓦工VPS_美国VPS » 修改CSS让AdSense广告位置居中的办法

赞 (0) 打赏

评论 0

评论前必须登录!

登陆 注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏