0 
<!DOCTYPE html>
<html>
<head>
    <title> Snake! </title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
    <body>
        <meta charset="UTF-8">
        <title>Snake!</title>
        <div id="game">
            <script src="snake.js" type="text/javascript"></script>
        </div>
    </body>
</head>
</html>

上記の JavaScript ゲームを作成しましたが、常にページの左上隅に表示されます。ホームページのスタイルを設定する css ページがあります。ゲームをページの別の位置に移動するには、html ページと css ページで何をする必要がありますか?

更新: CSS ページは次のようになります。

body{
background-image:url(nokiaphone.jpg);
background-repeat:no-repeat;
background-position: center top;
}

#game{
position:absolute;
left:1000px;
top:150px;
}
4

3 に答える 3

0

あなたの HTML 構造はかなり混乱しています... と のheadセクションbodyが混乱しています。ゲームを画面の中央に配置する次の例を試してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Snake!</title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
    <style type="text/css">
        #game { width: 600px; margin-left: auto; margin-right: auto; }
    </style>
</head>
<body>
    <div id="game">
        <script src="snake.js" type="text/javascript"></script>
    </div>
</body>
</html>
于 2013-04-25T13:34:49.220 に答える
0

ページの中央に配置しますか?

div#game幅の高さが固定されている場合の最も簡単な解決策は次のとおりです。

#game {
    position:absolute;
    width:500px;
    height:500px;
    top:50%;
    left:50%;
    margin-top:-250px; /*half of the height*/
    margin-left:-250px; /*half of the width*/
}

これが実際の例です。

完全なコードは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Snake!</title>
    <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
    <div id="game">
        <script src="snake.js" type="text/javascript"></script>
    </div>
</body>
</html>

そしてstyle.css、前のCSSで。

もっと知りたい場合は、未知の世界を中心にすることについての素晴らしい記事があります。

于 2013-04-25T13:32:27.817 に答える