Fatal编程技术网
  • html/
  • Html 无法将画布居中对齐

Html 无法将画布居中对齐

html canvas

Html 无法将画布居中对齐,html,canvas,alignment,center,Html,Canvas,Alignment,Center,我一直在谷歌上搜索解决方案，但毫无结果。我只想居中对齐我的画布。 我试过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

我一直在谷歌上搜索解决方案，但毫无结果。我只想
居中对齐
我的
画布
。 我试过
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>


您的浏览器不支持HTML5画布标记。

您可以通过以下方式将其居中对齐：

#Shooter {
  margin: auto;
  display: block;
}
确保父容器的宽度为100%

这里有一支钢笔。
我建议您从画布上删除
宽度
、
高度
和
对齐
标记。而是将样式区域添加到html中，并为画布定义css样式：

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


帆布{
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
宽度：320px；
高度：480px；
}
您的画布将如下所示：

<canvas id="Shooter">
我同意Käsebrot的观点，您应该将html编码与css分开，打开style.css文件并将其连接到“head”部分链接中的html页面
rel=“stylesheet”href=“style.css”
，然后给出画布css属性。 要使画布居中，只需为边距和显示属性指定值

canvas#Shooter{
保证金：0自动；
显示：块；
宽度：320px；
高度：480px；
}

文件标题
您的浏览器不支持HTML5画布标记。
你好，阿西姆，非常感谢。我试过了，终于成功了。你能告诉我为什么“margin:auto；”能起作用吗？谢谢alot@herblackcat. 自动调整页边距将告诉浏览器通过均匀划分画布未使用的任何空间来均匀填充左右页边距==居中@herblackcat希望您理解为什么
margin:auto
有效（谢谢markE）。如果一切顺利，你总是可以接受答案。嗨，丹尼尔，希万和卡塞布罗特，非常感谢你的建议。我会多练习