Vertical align on html5 game

Discussion and feedback on Construct 2

Post » Fri Dec 11, 2015 11:33 pm

Im aware im most probably not the first to ask about this, but after searching I couldn't find anything, so sorry about that!

So, there is some way to vertically center the canvas on a html5 construct game? I tinkered a bit with the index.html to no avail...but on the other hand im barelly html5/css literate and mildly retarded :lol:

Any help? Thanks!

(If it helps, the fullscreen on browser option is off, although I guess that was quite obvious)
B
23
S
6
G
1
Posts: 66
Reputation: 1,887

Post » Fri Dec 11, 2015 11:49 pm

Try:

canvas {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
B
55
S
17
G
8
Posts: 634
Reputation: 8,773

Post » Sat Dec 12, 2015 12:43 am

Elliott wrote:Try:

canvas {
position: absolute;
top: 50%;
transform: translateY(-50%);
}


It works!! But now the game is horizontally disaligned to the right with a chunk of it out of the screen xD

Maybe I put your code where it shouldn't be, I barely know what Im doing :lol:

Y tried adding transform: translateX(-50%); it gets to the x center again but messes up the vertical align and the game displays at the bottom, also with a part outside of the screen...

Any ideas? Thank you so much!

EDIT: This did the trick

Code: Select all
canvas {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         left: 0;
         right: 0;
         margin: 0 auto;
         }


Thanks again for showing me the way!
B
23
S
6
G
1
Posts: 66
Reputation: 1,887


Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 7 guests