修改CSS让AdSense广告位置居中的办法
办法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等很老的浏览器无效。
版权声明:本文内容以盗版加工为主,原创为辅,意在分享,收藏,记录工作中的点点滴滴。不代表任何组织,不代表任何商业机构,也不代表我个人所有想法。
心晴客栈 » 修改CSS让AdSense广告位置居中的办法
心晴客栈 » 修改CSS让AdSense广告位置居中的办法