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*%;

希望这有帮助！欢呼声。

编辑：

例如，如果您想将about部分的中心宽度设置为50％，则可以使用：（用于可视化目的的背景颜色......）

.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 个答案: