What is the best bootstrap 4 element class to display responsive Adsense advertisements horizontally centered on my webpage?
I currently use
<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>
I.e. the bootstrap 4 class container-xl shows the div at 1140px or 100% at smaller devices. Text-center centers text and images, I am not sure about the effect on the Adsense content. I guess it does not work. my-1 is just a bit of margin on the height.
The class="container-xl text-center my-1" displays centered ads most of the time but sometimes the same advertisement is suddenly left-aligened (as below, snip of the same part of the page with the same code but a different result within 1 refresh):
I can center items using the class justify-content-center in combination with flex containers. I.e. the bootstrap class d-flex. But if I use the class d-flex then the Adsense adds are not shown at all.
As explained “Adsense's responsive code determines the width of the iframe it inserts based on the width of the parent element in which it is placed. Normally this works fine because even when the parent element has no content yet, it still has a width because it fills the available width.
However, if your parent element is within a flexbox row which determines the width of its members based on their content, the width of this will be zero until content is added. So of there is nothing else in the box other than the Adsense code, at the time Adsense calculates the available width, it's zero.” in this answer.
For d-block, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto. But I do not want to set a width in order to remain rsposonsive...
FYI the Adsense requirements, e.g. "Responsive ads should not be placed inside containers with a fixed or limited height".
Update with the HTML of the ad slot:
For the first add on the page, this is the end of the previous row & container:
</td></tr></tbody></table></div></div></div></div></div></div></div>
Hereby the last div closes this element:
<div class="container-xl my-2 achtergrondgrijs90 shadow rounded">
So the active scope is:
<html>
<body>
<div class="row achtergrondgrijs95 py-2" id="inhoud" style="height: auto !important;">
Note: the style is not in my source and must have been added by Adsense.
The second add which sometimes aligns left is within the same structure. Note that this add is of the type 'in feed'. Also, please note that I have another issue that the Chrome DevTools responsive display of my ads is incorrect, this is open with Adsense help. This makes it hard to use DevTools to copy paste the HTML. Because the adds are all over the place in this mode. But this should be the important part of HTML of the misaligned add:
<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>
And this is the HTML for a session where the ad is displayed in the center:
<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>
Note: the "display: inline-table" surprises me but that is the same in both situations.
FYI the class achtergrondgrijs90 or 95 is just { background-color: #e6e7e4; }.
