爲什麼文本對齊對畫布有影響？

Question

我有多個畫布層疊在彼此之上，基本上我正在製作一個具有歷史和刪除的繪畫應用程序。畫布和父div不一樣寬。

我在桌子上敲我的頭，試圖將我的畫布放在div的中間，直到我讀this answer，這幾乎是最低投票的問題。

簡而言之：

以上答案只有當你的畫布是相同的寬度容器中工作。

這無論作品：

#container { 
     margin: 0px auto; 
     text-align: center; 
} 

如果我註釋掉文本對齊我的畫布熄滅中心。

問：這是什麼意思？爲什麼文本對齊對canvas元素有影響？

有一些關於CSS的奇怪怪癖，我以相似的方式學習並且經常使用。我認爲理解這將是另一個使用胸部的工具。

Answer 1

canvas是一個默認的內聯元素（就像img,input等），所以它顯示在文本流內。運行下面的示例查看示例。

給畫布display: block使其成爲塊元素。

<p>This is a longer text with inline elements such as canvas <canvas style="width: 1em; height: 1em; border: 1px solid red;"></canvas>, image <img src="http://lorempixel.com/20/20/" /> and an <input type="button" value="input" /> element.</p> 
 

 
<p>Give the canvas <code>display: block</code>, like this one <canvas style="width: 1em; height: 1em; border: 1px solid red; display: block"></canvas>, so that it becomes an block element.</p>

在此線程樣的答案如此