Hello! I insert a piece of code, everything works, but the alignment of the widget horizontally occurs along the left edge. I tried to use various align, but for some reason everything is ignored, I do not understand anything. Here is a screen of the problem:

enter image description here

here is the html code using

:

<t t-name="website.checkwidget"> <t t-call="website.layout"> <div id="wrap" class="oe_structure oe_empty"/> <!-- Put this script tag to the <head> of your page --> <head> <script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script> <script type="text/javascript"> VK.init({apiId: 1111111, onlyWidgets: true}); </script> </head> <!-- Put this div tag to the place, where the Comments block will be --> <p align="center"> <div id="vk_comments"></div> </p> <p align="center"> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"}); </script> </p> </t> </t>

Please tell me what the problem is?

    2 answers 2

    Need to set:

     #vk_comments { margin: 0 auto; }

      Or so

       .vk-comment-container{ max-width: 665px; margin: 0 auto; } #vk_comments, #vk_comments iframe { width: 100% !important; } 
        <script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script> <script type="text/javascript"> VK.init({apiId: 1111111, onlyWidgets: true}); </script> <div class="vk-comment-container"> <div id="vk_comments"></div> </div> <p align="center"> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, width: "100%", attach: "*"}); </script>