Question

我不能将div id限制为：游戏区域为水平和垂直中心。

需要在跨平台上工作。我试图设置marig-top或padding，但是在边缘上，背景图像是以div为主。当我使用填充时，网站在所有分辨率上看起来都不同。

我也尝试在css中将display设置为table和margin auto，但它只对齐一维

网站页面（点击＆＃34; zagraj＆＃34;内容刷新，刷新一个需要保证金）：

http://nwstudio.esy.es/panda/main/

Phaser：

var game = new Phaser.Game(360,640,Phaser.CANVAS, 'game-area');

HTML：

<body> 
    <div id="main">
        <CENTER>
                <img src="img/background.png"/>
        </CENTER>
    <center>
        <a href='#' id='run'><img src="img/button_start.png"/></a>
    </center>
    </div>

    <div id="game-area">
    </div>
</body>

CSS：

body{
    padding: 0px;
    margin: 0px;
    background-image: url('../img/background_second.png');
    height: 100vh;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: hidden;
    position: relative;
}

#game-area{
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align:middle;
}

#main{
    display: block; background-color: #FFF; width: auto; height: 6000px;
}

@media only screen and (max-device-width: 1024px) {
    canvas{
        width: 100% !important;
        height: 100% !important;
    }


@media only screen and (device-width: 412px) {
    canvas{
        width: 100% !important;
        height: 80% !important;
        margin-top: -12px;
    }
}

Answer 1

如果您希望游戏画布适合游戏div，您可以使用Phaser的内置缩放模式。在您的启动功能中，您可以将代码liuke：

init: function() {
        //Making the screen work in different orientations on different devices
        this.scale.pageAlignHorizontally = true;
        this.scale.pageAlignVertically = true;
        //this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        //If the player clicks outside the game, it continues running - anti-cheating
        this.stage.disableVisibiltyChange = true;

有不同的比例模式，但听起来你想要Phaser，ScaleManager.SHOW_ALL或EXACT_FIT

请参阅here以查看有关Phaser规模管理器的文档。

保证金div以水平和垂直为中心

1 个答案: