Question

我一直在谷歌搜索解决方案无济于事。我只想center-align我的canvas。我尝试过float="center"，text-align="center"，margin-top: 100px 但我的舞台没有在浏览器中对齐中心。任何帮助表示赞赏。

<body onLoad="Main();">
<canvas id="Shooter" width="320" height="480" align="center">
Your browser does not support the HTML5 canvas tag.
</canvas>

Answer 1

你可以将它对齐：

#Shooter {
  margin: auto;
  display: block;
}

确保父容器的宽度为100％。

这是一支钢笔。 http://codepen.io/asim-coder/pen/aNpWoB

Answer 2

我同意Käsebrot你应该将你的html编码与你的css分开，然后打开style.css文件并将它连接到'head'部分链接rel="stylesheet" href="style.css"中的html页面，然后给你的canvas css属性。要使画布居中，您只需要为边距和显示属性赋值。

canvas#Shooter {
    
  margin: 0 auto;
  display: block;
  width: 320px;
  height: 480px;
        
}

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="style.css"> 
  </head>

  <body onLoad="Main();">
    <canvas id="Shooter">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
  </body>

</html>

Answer 3

我建议您从画布中删除width，height和align标记。而是在html中添加一个样式区域，并为canvas定义一个css样式：

<style>
    canvas {
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 320px;
        height: 480px;
    }
</style>

你的画布看起来像这样：

<canvas id="Shooter">

无法居中对齐画布

3 个答案: