css - 如何使显示属性可能发生变化的 div 居中？

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 包裹它，设置为 display:inline-block always 并使其居中。

<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;
}