为什么 text-align 对画布有影响？答案

【问题标题】：Why does text-align have an effect on canvas?为什么 text-align 对画布有影响？
【发布时间】：2017-08-05 02:49:48
【问题描述】：

我有多个相互叠加的画布，基本上我正在制作一个具有历史记录和删除功能的绘画应用程序。画布与父 div 的宽度不同。

我正把头撞在桌子上，试图将我的画布放在 div 的中心，直到我读到this answer，这几乎是投票率最低的问题。

简而言之：

仅当您的画布与容器的宽度相同时，上述答案才有效。

无论如何这都有效：

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

如果我注释掉文本对齐我的画布会偏离中心。

问：这有什么意义？为什么 text-align 会对画布元素产生影响？

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

【问题讨论】：

标签： html css canvas

【解决方案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>

【讨论】：