什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

切断CSS中canvas来自父级text-align属性的继承

今天改博客的时候,遇到了一个让我头疼的问题,讲道理CSS中覆盖掉上级元素继承下来的样式只需要重新对子元素重写一遍样式即可,但我就是没办法解决掉关于canvas继承自父级元素的text-align属性。

先来看一下代码:

HTML

<div id="main" class="main">
  <canvas id="sub" class="sub"></canvas>
</div>

CSS

.main{
  text-align:center;
}

最终的效果为canvasmain这个div中居中显示。

我尝试过加下面的CSS来覆盖掉继承:

.sub{
  text-algin:left;
}

但此时,这个canvas仍然居中显示,另外在Chrome中确实可以看到继承已经被复写了。

那么问题出在哪里呢?偶然看到一篇文章中写道:

在W3C CSS2.1规范第16.2节 对text-align 有详细地描述:
值: left | right | center | justify | inherit
初始值:匿名值,由’direction’的值而定,如果’direction’为’ltr’则为’left’,如果’direction’为’rtl’则为’right’。
应用于: 块级元素,表格单元格,行内块元素
继承性: 是 计算后的值:初始值或指定值。
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点,标准里说这个属性是用来对齐行内内容的,所以,不应该对块级内容起作用。

https://www.cnblogs.com/mawenying/p/5363844.html中提到,text-align是对行内元素,也就是inline起作用,对块级元素block是不起作用的,所以对canvas再怎么覆写样式也不会起作用,canvas比较特殊,它算不上是块级元素。所以我们要这样做:

.sub{
  text-align:left;
  display:block;
}

因为text-align对块级元素是不起作用的,让canvas成为块级元素之后就会自动切断这个继承。

也因此确实发现我的CSS水平很薄弱,仍然需要磨练,以此分享一下给那些同样困惑的同学,少走弯路。

打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 切断CSS中canvas来自父级text-align属性的继承
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏