Bootstrap4&Adsense：如何保证居中对齐？

Question

什么是最好的 bootstrap 4 元素 class 以 my webpage 水平居中显示响应式 Adsense 广告？

我目前使用

<div class="container-xl text-center my-1" itemscope itemtype="https://schema.org/WPAdBlock">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
...standard google copy paste...
    <ins class="adsbygoogle"
             style="display:block"
    ... </script>
        </div>

即bootstrap 4 class container-xl 在 1140 像素或 100% 的较小设备上显示 div。 Text-center 居中文字和图片，我不确定对 Adsense 内容的影响。我想这是行不通的。 my-1 只是在高度上有一点余量。

class="container-xl text-center my-1"大部分时间都是居中展示广告，但有时同样的广告会突然左对齐（如下图，截取页面相同部分，代码相同，结果不同1刷新):

我可以将 class justify-content-center 与弹性容器结合使用来居中项目。 IE。 bootstrap class d-flex。但是如果我使用 class d-flex 那么 Adsense 添加根本不会显示。

如前所述，“Adsense 的响应式代码根据放置它的父元素的宽度确定它插入的 iframe 的宽度。通常这很好用，因为即使父元素还没有内容，它仍然有一个宽度，因为它填充了可用宽度。

但是，如果您的父元素位于根据其内容确定其成员宽度的弹性框行内，则在添加内容之前该元素的宽度将为零。因此，除了 Adsense 代码外，框中没有其他任何内容，在 Adsense 计算可用宽度时，它为零。”在 this answer。

对于 d-block，Bootstrap 还包括一个 .mx-auto class 用于水平居中的固定宽度块级内容——即具有 display: block 和宽度集的内容— 通过将水平边距设置为自动。但是我不想设置宽度以保持响应...

仅供参考 Adsense requirements，例如"Responsive ads should not be placed inside containers with a fixed or limited height"。

更新广告位的HTML：

对于 the page 上的第一个添加，这是前一行和容器的结尾：

</td></tr></tbody></table></div></div></div></div></div></div></div>

特此最后div关闭此元素：

<div class="container-xl my-2 achtergrondgrijs90 shadow rounded">

所以活动范围是：

<html>
<body>
<div class="row achtergrondgrijs95 py-2" id="inhoud" style="height: auto !important;">

注意：该样式不在我的来源中，必须由 Adsense 添加。

有时左对齐的第二个添加在同一结构中。请注意，此添加的类型为 'in feed'。另外，请注意我还有另一个问题，即 Chrome DevTools 响应式显示我的广告不正确，这是 open with Adsense help。这使得很难使用 DevTools 复制粘贴 HTML。因为在这种模式下，添加物无处不在。但这应该是未对齐添加的HTML的重要部分：

<div class="container-xl text-center my-1" itemscope="" itemtype="https://schema.org/WPAdBlock">
    <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle" style="display: block; text-align: center; height: 124px; width: 1005px;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3768049119581858" data-ad-slot="3938780514" data-adsbygoogle-status="done"><ins id="aswift_2_expand" style="display: inline-table; border: none; height: 124px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 1005px; background-color: transparent;"><ins id="aswift_2_anchor" style="display: block; border: none; height: 124px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 1005px; background-color: transparent; overflow: hidden;"><iframe id="aswift_2" name="aswift_2" style="left: 0px; position: absolute; top: 0px; border: 0px; width: 1005px; height: 124px;" ...........and a lot more... data-load-complete="true"></iframe></ins></ins></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
</div>

这是 HTML 广告显示在中心的会话：

<div class="container-xl text-center my-1" itemscope="" itemtype="https://schema.org/WPAdBlock">
    <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle" style="display: block; text-align: center; height: 200px;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3768049119581858" data-ad-slot="3938780514" data-adsbygoogle-status="done"><ins id="aswift_2_expand" style="display:inline-table;border:none;height:200px;margin:0;padding:0;position:relative;visibility:visible;width:1110px;background-color:transparent;"><ins id="aswift_2_anchor" style="display:block;border:none;height:200px;margin:0;padding:0;position:relative;visibility:visible;width:1110px;background-color:transparent;"><iframe id="aswift_2" name="aswift_2" style="left:0;position:absolute;top:0;border:0;width:1110px;height:200px;" sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="1110" height="200" frameborder="0" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-........a lot more.... data-load-complete="true"></iframe></ins></ins></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

注意："display: inline-table" 令我吃惊，但这两种情况都是一样的。

仅供参考，class achtergrondgrijs90 or 95 只是 { background-color: #e6e7e4; }。

Answer 1

所有 Adsense 添加似乎都可以正确显示所有格式，现在使用 bootstrap 4 元素的以下层次结构和class是：

<div class="container-fluid">
<div class="container-xl">
<div class="row">
<div class="col">
adsense code

我做了很多尝试，尤其是错误。延迟加载

<script>
         window.addEventListener('load', (event) => {
              (adsbygoogle = window.adsbygoogle || []).push({});
            });
</script>

没有解决问题。还插入一个 class 来定义断点，例如

<ins class="adsbygoogle container-xl"
         style="display:block"

没有帮助。

注意：如果没有可用的添加，为了避免空元素，似乎只使用 bootstrap 容器和行，它有自己的内容，独立于添加 -> 只有直接父元素add (class col) 没有其他内容。例如。 this page 现在我很满意。

Bootstrap4&Adsense：如何保证居中对齐？

Bootstrap 4 & Adsense: how to ensure center alignment?

adsense

bootstrap-4