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

时间:2017-07-31 03:00:02

标签: html css canvas

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

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

简而言之:

  

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

     

无论如何都可以:

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

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

问:这有什么意义,为什么text-align会对canvas元素产生影响?

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

1 个答案:

答案 0 :(得分:1)

默认情况下,

canvas是内联元素(就像imginput等),因此它显示在文本流中。运行下面的示例以查看示例。

赋予画布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>