欢迎您来到,李雷博客 | PHP博客        登录  |  注册

修改CSS让谷歌AdSense广告内容居中显示

更新:2023-01-05 11:36:50
人气:54
来源:本站原创
A+

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

示例:

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({});

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

修改前广告居左,修改后广告居中

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

示例:

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

type="adsense"

data-ad-client="ca-pub-xxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"

在此代码调用的外部增加一个DIV包围,同时用CSS文件中定义这个

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

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

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2023 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4