如何在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中居中畫布

回答

相關問題