Question

我正试图将谷歌广告中心化（对出版商来说，双击，adsense）。

首先我假设他们将使用display: block;所以我做了margin: 0 auto;

他们似乎正在使用display: inline-block;所以我只使用了text-align: center;

是否有一种解决方案可以帮助我在晚上睡个好觉，知道如果他们的广告中心在一天之内将显示更改为其他内容而无法改变？如果他们使用display: block;或其他显示类型，还可以与其他广告提供商合作吗？

这是我现在的代码：

.ad {
  text-align: center;
  // & > div {
  //   display: inline-block;
  // }
}

它没有评论，但不确定我是否应该取消注释。

广告代码现在看起来像这样，但可以更改。

<div class="ad" id="div-gpt-ad-id-censored" data-google-query-id="id-censored">
  <script>
    googletag.cmd.push(function() { googletag.display('id-censored'); });
  </script>
  <div id="google_ads_iframe_/id-censored_0__container__" style="border: 0pt none; display: inline-block; width: 234px; height: 60px;">
    <iframe style="border: 0px none; vertical-align: bottom;" src="http://tpc.googlesyndication.com/safeframe/1-0-6/html/container.html" id="google_ads_iframe_/censored" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" data-is-safeframe="true" width="234" height="60" frameborder="0">
    </iframe>
  </div>
</div>

同样，其他广告提供商可能会将其他内容放入其中。

Answer 1

用自己的DIV包裹它，它被设置为显示：内联块总是让它居中。

<div class="outer-wrapper">
<div class="ad-wrapper">
<div class="ad" id="div-gpt-ad-id-censored" data-google-query-id="id-censored">
  <script>
    googletag.cmd.push(function() { googletag.display('id-censored'); });
  </script>
  <div id="google_ads_iframe_/id-censored_0__container__" style="border: 0pt none; display: inline-block; width: 234px; height: 60px;">
    <iframe style="border: 0px none; vertical-align: bottom;" src="http://tpc.googlesyndication.com/safeframe/1-0-6/html/container.html" id="google_ads_iframe_/censored" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" data-is-safeframe="true" width="234" height="60" frameborder="0">
    </iframe>
  </div>
</div>
</div>
</div>

.ad-wrapper{
    display:inline-block;
    text-align:left;
}

.outer-wrapper{
    display:block;
    text-align:center;
}

Answer 2

您可以使用众所周知的特技left + transform属性来集中block和inline-block：

.cont {
  width: 100%;
}
[class^="ad"] {
  width: 200px;
  height: 100px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.ad1 {
  display: block;
  background: tomato;
}

.ad2 {
  display: inline-block;
  background: orange;
}

<div class="cont">
<div class="ad1">advert1 display: block</div>
<div class="ad2">advert2 display: inline-block</div>
</div>

更新

div尚未定义宽度和高度

.cont {
  width: 100%;
}
[class^="ad"] {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.ad1 {
  display: block;
  background: tomato;
}

.ad2 {
  display: inline-block;
  background: orange;
}

<div class="cont">
<div class="ad1">advert1 display: block</div>
<div class="ad2">advert2 display: inline-block</div>
</div>

如何显示属性的div可能会改变？

2 个答案:

更新