html - 为什么文本对齐对 Canvas 有影响？

Question

我有多个 Canvas 彼此分层，基本上我正在制作一个具有历史记录和删除的绘画应用程序。 Canvas 与父 div 的宽度不同。

在我阅读 this answer 之前，我一直在用头敲 table ，试图将我的 Canvas 置于 div 的中心。 ，这几乎是得票率最低的问题。

简而言之:

The above answers only work if your canvas is the same width as the container.

This works regardless:

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

如果我注释掉文本对齐，我的 Canvas 就会偏离中心。

问:这有什么意义，为什么文本对齐会对 Canvas 元素产生影响？

关于 CSS 有一些奇怪的怪癖，我以类似的方式学习并经常使用。我认为了解这一点将是另一个可用的工具。

Answer 1

canvas 默认是一个内联元素(就像 img、input 等)所以它显示在文本流中.运行下面的示例以查看示例。

给 Canvas display: block 使其成为 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>