设置 letter-spacing 后文字不能居中的解决方法

设置 letter-spacing 后文字不能居中的解决方法 HTML笔记 第1张

今天才发现,给文字设置 letter-spacing 再设置 text-align: center; ,文字会整体往左偏移,不能居中。 

给文字嵌套了一个 span 标签,再选择文字可以看出,letter-spacing 给每个字的右边都加了一个间距。

设置 letter-spacing 后文字不能居中的解决方法 HTML笔记 第2张

设置居中的时候,最后一个字的右间距也会包括其中,所以会出现不能居中的情况。

比较简单的一个方法是给文字设置 text-indent ,属性值和 letter-spacing 相同。

CSS代码如下:

text-align: center;
letter-spacing: 1em;
text-indent: 1em;

这样就可以实现文字居中了:

设置 letter-spacing 后文字不能居中的解决方法 HTML笔记 第3张

未经允许不得转载:前端资源网 - w3h5 » 设置 letter-spacing 后文字不能居中的解决方法

赞 (25)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)