I am trying to inject a banner inside a Facebook Canvas page, where my game is being displayed. There is a part of my code that is meant to place the banner in the center of the screen, right below an iFrame that contains the game. The banner, as an HTML <img>
element, is placed inside a <div>
element:
"banner.setAttribute(\"src\",\"https://www.toyboxgms.com/cloverclash/TwitchyBanner.png\");" +
"banner.setAttribute(\"align\",\"center\");" +
"banner.setAttribute(\"Id\",\"banner\");"
...
If I run the game outside the Facebook Canvas (Mozilla browser), everything is in its place. However, once I play it on Facebook, the banner gets stuck to the left side of the screen like in the screenshot, even though the alignment is clearly set to "center
". I know that Facebook is only placing my game inside an iFrame and nothing else.
In my case, the banner can only be aligned right or left. Is there a simple way to change this and centrally align it?