Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Vertical alignment of the canvas within a webpage


making_games
 Share

Recommended Posts

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...