首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在html5中将画布居中

如何在html5中将画布居中
EN

Stack Overflow用户
提问于 2011-02-26 23:59:46
回答 7查看 260.2K关注 0票数 121

我已经寻找了一段时间的解决方案,但没有找到任何东西。也许只是我的搜索词。嗯,我正试着根据浏览器窗口的大小来使画布居中。画布大小为800x600。如果窗口小于800x600,它也应该调整大小(但目前这并不是很重要)

EN

回答 7

Stack Overflow用户

发布于 2012-06-14 21:13:12

您可以为画布提供ff CSS属性:

代码语言:javascript
复制
#myCanvas
{
    display: block;
    margin: 0 auto;
}
票数 56
EN

Stack Overflow用户

发布于 2011-03-16 05:44:52

只需在HTML中将div居中即可:

代码语言:javascript
复制
  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

只需将高度和宽度更改为任意值,就会得到一个居中的div

http://jsfiddle.net/BVghc/2/

票数 20
EN

Stack Overflow用户

发布于 2018-11-24 11:36:52

要水平居中画布元素,必须将其指定为块级别,并将其左边界和右边界属性保留给浏览器:

代码语言:javascript
复制
canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

如果想要垂直居中,画布元素需要绝对定位:

代码语言:javascript
复制
canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

如果要将其水平和垂直居中,请执行以下操作:

代码语言:javascript
复制
canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

有关更多信息,请访问:https://www.w3.org/Style/Examples/007/center.en.html

票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5127937

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档