Question

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

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

简而言之：

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

无论如何都可以：

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

如果我评论文字对齐我的画布偏离中心。

问：这有什么意义，为什么text-align会对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>

为什么text-align会对画布产生影响？

1 个答案: