如何居中對齊腳本

Question

我使用編寫了一個簡單的游戲，然后在JavaScript代碼中創建了畫布。 我希望將其居中對齊/放置在頁面上的某個位置，盡管我不知道該怎么做。 這是游戲：

<body>
    <div>
        <script src='js/game.js'></script>
        <div class='about'>

            <h2>Controls:</h2>
            <p>Use the <span class="glyphicon glyphicon-arrow-left"></span> <span class="glyphicon glyphicon-arrow-right"></span><span class="glyphicon glyphicon-arrow-up"></span> and <span class="glyphicon glyphicon-arrow-down"></span> arrows to control the bacon eater.</p>
            <h2>Rules:</h2>
            <p>Collect the highest amount of bacon in the alloted time amount
            </p>
        </div>
    </div>


</body>

Answer 1

使用CSS可以使居中元素非常容易。 將元素括在div並應用以下html規則：

margin: 0 auto;
width: *some-percent-here*%;

希望這可以幫助！ 干杯。

編輯：

例如，如果您想以50％的寬度將about部分居中，則可以使用：（用於可視化目的的背景顏色...）

.about {
   margin: 0 auto;
   width: 50%;

   background-color: blue;
}

注意：這將使div居中-而不是div內的內容。

對於文本居中使用：

text-align: center;

為了完整起見，應注意，可以使用javascript所應用的樣式將div居中。 但是，在我看來，您的解決方案希望靜態放置畫布-使html成為更好的選擇...

Answer 2

只需將主體選擇器的CSS規則更改如下：

body {
  background-color: black;
  color: grey;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

如何居中對齊腳本

問題描述

2 個解決方案

解決方案1
2 已采納 2014-11-19 23:43:36

解決方案2
0 2014-11-19 23:50:12

如何居中對齊腳本

問題描述

2 個解決方案

解決方案1 2 已采納 2014-11-19 23:43:36

解決方案2 0 2014-11-19 23:50:12

解決方案1
2 已采納 2014-11-19 23:43:36

解決方案2
0 2014-11-19 23:50:12