Page 1 of 1

Center Your HTML Games in Browser

PostPosted: Wed Aug 06, 2014 7:26 pm
by time-killer-games
1) Rename your original index.html to index2.html. Then create a new index.html in the same directory with notepad using this as its contents:
<style>
body {
background: #222;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
div.myclass {
position: fixed;
top: 50%;
left: 50%;
margin-left: -HalfFrameWidthpx;
margin-top: -HalfFrameHeightpx;
padding: 0px;
border: 0px;
}
</style>

<body>
<div class="myclass">
<iframe name="myframe" src="index2.html" scrolling="no" frameborder="0" width="FrameWidth" height="FrameHeight"></iframe>
</div>
</body>


2) Replace HalfFrameWidth with your project's frame width in pixels divided by two. So if you have a frame width of 640, use 320.

3) Replace HalfFrameHeight with your project's frame height in pixels divided by two. So if you have a frame height of 480, use 240.

4) Replace FrameWidth with your project's frame width in pixels.

5) Replace FrameHeight with your project's frame height in pixels.

6) Optionally if you want to change the webpage's background color, replace 222 and cccccc with your desired HTML color code.

This is probably the best solution available to center your games in the browser, enjoy. :D

Re: Center Your HTML Games in Browser

PostPosted: Wed Aug 06, 2014 10:13 pm
by Vengeance66
Thanks for your tips TKG!

Really appreciated! :D

Re: Center Your HTML Games in Browser

PostPosted: Fri Aug 08, 2014 5:28 am
by reneuend
Thank you TKG!