HTML-spanがtext-align无效的问题

在IE中，span元素里的text-align也是起作用的。但是现在Windows10开始，推荐的浏览器是Edge（Chromium内核），

text-align就不好用啦。

比如，像下面这种就居中不了。

HTML： <span>can NOT align center</span>

CSS： span{text-align:center;}

 

修改一下，像下面这样是可以的。

HTML： <p><span>can align center</span></p>

CSS： p{text-align:center;}

 

为什么要套一个p元素呢？这里说到，text-align起作用的话，需要如下两个条件：

1，作用元素需要是一个行内元素，比如这里的span

2，选择器要指向其父元素（父元素必须为块元素，比如这里的p）

 

所以有时候，我们发现这个text-align怎么在IE中好使，在Chrome，Edge等中不好用啊，本质原因还是IE不按套路出牌。

 

但是有时候我们已经有代码了，由于Win10的原因，转到Edge，那么改那么多代码也比较郁闷。

所以还可以像下面这样写：

HTML： <span>can align center</span>

CSS： span{text-align:center;display:inline-block;}

我猜测这个inline-block把上面条件中写的那两个条件的活儿都干了。

 

参照：

https://cotodama.co/css-center/#text-aligncenter