テキストアライメントがキャンバスに影響するのはなぜですか？

Question

私は複数のキャンバスを重ね合わせていますが、基本的には履歴と削除を持つペイントアプリケーションを作っています。キャンバスは親divと同じ幅ではありません。

私は、this answerと読むまでは、私のキャンバスの中心に机の上に頭を向けていました。要するに

：あなたのキャンバスは、コンテナと同じ幅であれば

上記の回答のみ動作します。

これは関係なく、動作します：

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

私は私のキャンバスは、中心をオフに行くのテキスト揃えをコメントアウトした場合。

Q：これはどのように意味がありますか、テキストアライメントはキャンバス要素にどのような影響を与えますか？

私が習った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>