Horizontal Align Problem with Phaser 2.3

[turnA 21]

Hi there,

 

I have just updated my games with the latest Phaser 2.3, but it seem now my games will not horizontally aligned to Center like usual, it just stay left aligned. Vertical align has no problem though.

Do anyone have problem like this with Phaser 2.3? 

 

My css in index.html:

		body {			margin: 0;			padding: 0;			background-color: #1d4633;		}		canvas {			padding-left:0;			padding-right:0;			margin-left:auto;			margin-right:auto;			display:block;			width:100%;		}

My scaling and align code in boot.js:

this.stage.backgroundColor = '#1d4633';this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;

Any help will be greatly appreciated!

Thanks.

[icp 72]

http://www.html5gamedevs.com/topic/13874-pagealignvertically/#entry79067

[turnA 21]

Thank you for your reply icp, but I have problem with the horizontal align, not vertical.
I also want to add that my Phaser/canvas element is located directly on the window element, not under div element or something.

[icp 72]

Try this:

this.stage.backgroundColor = '#1d4633';this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

[turnA 21]

I have tried too icp, unfortunately that doesn't work

Thanks for the help though, been pulling my hair for several hours now.

 

I just don't understand, how this thing (aligning) that worked flawesly before, suddenly changed now... 

[turnA 21]

Anyone? Is it only me that encounter this problem on Phaser 2.3??

Maybe I can see any example project that can successfully have center horizontal align using Phaser 2.3?

Appreciate any feedback/reply/information...

[drhayes 337]

Looks like your CSS will take care of that with the margins set like that. What happens if you remove the "this.scale.pageAlignHorizontally = true;" line?

 

I'd take out the "width: 100%", though... and the "display:block", that's redundant.

[turnA 21]

@drhayes: Wow, you are right! I must use ONLY the CSS or the horizontalAlign = true; to make it work.

I think that make it easier for new user of Phaser, but it certainly confuse old timer like me who has limited knowledge of CSS and only use old template that works without problem before.

 

Thanks for the help drhayes!