当前位置

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

James Qi 在 2018年12月24日 - 11:53 提交

  我们做了这么多年的AdSense,在广告的摆放上还是很注意的,特别是位置,要让可见率提高非常重要。

  当然,还有一些细节,例如前一阵子发现有些广告自动在手机端变成了全屏宽度,在某些地方遮盖住了页面中的边框线,显得不够美观,于是我们就改为了300x250的固定宽度。

  接下来还有一个问题,300x250固定宽度广告在不同宽度的手机上的位置有时居中有时偏左,特别是大屏手机上,偏左也不好看,最好能居中显示。

  请教美工设计同事后,给出了修改CSS的方案:

  办法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等很老的浏览器无效。

 

 

自由标签:

评论

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。