0 Favourites

Vertical align on html5 game

  • 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

    Any help? Thanks!

    (If it helps, the fullscreen on browser option is off, although I guess that was quite obvious)

  • Try:

    canvas {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    }

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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

    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

    canvas {
    			position: absolute;
    			top: 50%;
    			transform: translateY(-50%);
    			left: 0;
    			right: 0;
    			margin: 0 auto;
    			}[/code:3tt02ge5]
    
    Thanks again for showing me the way!
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)