Vertical alignment of the canvas within a webpage

[making_games]

Hi,

 

I am trying to vertically align my game within the browser (on the desktop atm).

 

I can get it to work when the game is not placed within a div:

 

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    game.scale.pageAlignHorizontally = true;

    game.scale.pageAlignVertically = true;

 

When placed within a div I can get it to align horizontally, but not vertically:

 

    game.scale.windowConstraints.bottom = "visual";

    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    game.scale.pageAlignHorizontally = true;

    game.scale.pageAlignVertically = true;

 

I suspect this is because Phaser aligns the canvas to the vertical middle of the surrounding div, but that div needs a height for it to be able to do that?

 

I have tried setting the css of the div to be:

 

{

    height: 100%;

    width: 100%;

    min-height: 100%;

}

 

But this has not made a difference, the canvas sits at the top of the page (my css knowledge isn't the best). I can't give the div a height in pixels as I don't know what that will be, because the window can re-size.

 

Does anybody know the solution to this?

 

Many thanks for any help.

[drhayes]

Block-level elements like divs size to their content unless you specify the height. You'll have to make sure every parent of that div is sized to "height: 100%" as well, all the way up to the body and the html tags.