如何在html5中居中画布

我一直在寻找解决方案，但还没有找到任何东西。也许这只是我的搜索条件。嗯，我试图根据浏览器窗口的大小制作画布中心。画布是800x600。如果窗口变得低于800×600，它应该调整以及（但这并不是目前非常重要）如何在html5中居中画布

2011-02-26 jorgen

为什么不整页印刷品吗？ –

如何告诉它在调整大小时不制作尺寸和没有滚动条而制作完整页面画布？ – jorgen

不要在HTML中做到这一点..做到这一点与JavaScript，使用像appendChild或东西的东西，并设置宽度和高度window.innerWidth和window.innerHeight –

只是居中在HTML中的div：

#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/

来源

2011-03-15 21:44:52 JoeCianflone

幸运的是，我很快需要这个后，你发布它。 :) – mcandre

真棒！很高兴我能帮到 – JoeCianflone

如果画布比容器小，这不起作用。 – SystemicPlural

130

给画布下面的CSS样式属性：

canvas { 
    padding-left: 0; 
    padding-right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    width: 800px; 
}

编辑

因为这个答案很流行，我要补充的多一点点的细节。

以上属性将水平设置为居中画布，div或其他任何与您父级相关的节点。没有必要更改顶部或底部边距和填充。您指定宽度并让浏览器用剩余空间填充自动边距。

但是，如果你想少打字，你可以使用你所希望的任何CSS缩写性质，如

canvas { 
    padding: 0; 
    margin: auto; 
    display: block; 
    width: 800px; 
}

围绕画布垂直需要不同的方法。然而。您需要使用绝对定位，并指定宽度和高度。然后将左侧，右侧，顶部和底部属性设置为0，并让浏览器用剩余空间填充自动边距。

canvas { 
    padding: 0; 
    margin: auto; 
    display: block; 
    width: 800px; 
    height: 600px; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

画布将基于如果没有找到具有position集到relative或absolute，或身体的第一父元素中心本身。

另一种方法是使用display: flex，在IE11

可

此外，请确保您使用最新的文档类型，如5

来源

2011-10-16 03:57:05

这是正确的解决方案+1 – ProllyGeek

display：block;和余量：0 auto 0 auto;也够了。谢谢！ – Chris

对于垂直居中画布，只要您在HTML中指定宽度和高度，就不需要放入宽度和高度。无论如何，在铬上。 – Zac

我有同样的问题，XHTML或HTML，因为我有许多不同宽度的图片，我只用高度信息加载。设置宽度可以让浏览器伸展并挤压图片。我通过在image_tag行居中之前的文本行解决了这个问题（也摆脱了float：left;）。我希望文本能够保持一致，但这是一个小小的不便，我可以容忍。

来源

2012-04-23 12:21:15 MDM

你可以给你的画布FF CSS属性：

#myCanvas 
{ 
    display: block; 
    margin: 0 auto; 
}

来源

2012-06-14 13:13:11 jinmichaelr

这应该是被接受的答案。 – lux

你能提供一个jsfiddle吗？这种方法似乎不起作用 –

为什么这不是公认的答案？！？！？！ –

以上答案只有当你的画布是相同的宽度容器中工作。

这无论作品：

#container { 
 
    width: 100px; 
 
    height:100px; 
 
    border: 1px solid red; 
 
    
 
    
 
    margin: 0px auto; 
 
    text-align: center; 
 
} 
 

 
#canvas { 
 
    border: 1px solid blue; 
 
    width: 50px; 
 
    height: 100px; 
 
    
 
}

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

来源

如何在html5中居中画布

回答

相关问题