分享好友 教程首页 教程搜索 频道列表

字符间距用了letter-spacing后,text-align无法完全居中的解决方案

2022-10-13 16:403960
+关注29
核心提示:用代码测试即可

在项目中,有时需要给字符设置间距,如:

为了稳定显示,我们通常不用空格,而是用letter-spacing属性给字符加上间距。如:

.box {
    letter-spacing: 14px;
    text-align: center;
}


实际并没有完全居中对齐,而是向右偏移了14像素,这是因为letter-spacing是加在字符右侧空间的,为了解决这一问题,可以给字符串加上同样像素的缩进 text-ingent即可

.box {
    letter-spacing: 14px;
    text-indent: 14px;
    text-align: center;
}


本文标签: #居中 #文字 #缩进
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

在css中使用display: flex;时两头对齐,上下居中的方案

    使用 display: flex; 布局时,可以通过设置 justify-content: space-between; 属性将子元素两端对齐。

小黑 CSS教程2023-04-15

img标签的水平居中、靠左、靠右

    //水平靠左.alignleft{display:inline;float:left;}imgsrc=class=alingleft//水平靠右.alignright{display:inline;float:right;}imgsrc=class=alignright//水平居中.aligncenter{clear:both;display:block;margin:au

网络转载 CSS教程2022-05-19

文章p标签css首行缩进text-indent后,导致图片img也跟着缩进从而无法居中问题

    段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。p{text-indent:2em;}注:div标签不要忘记起始符。text-i

小黑 CSS教程 12022-04-29

关于touchslider.js滑动切换页面的使用

    需用代码测试

网络转载 移动端模板制作2022-03-19

原生js实现横向 tab 栏切换,选中项自动滚动居中

    需要用代码测试

小黑 JavaScript教程2022-03-19

下一篇
我来说两句
抢沙发