css的文字间距letter-spacing的应用以及应用后不居中的显示

最新推荐文章于 2024-05-11 15:54:26 发布

左手喵子

最新推荐文章于 2024-05-11 15:54:26 发布

阅读量447

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136095504

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文讨论了HTML中使用letter-spacing调整字间距导致文本不居中的问题，提出通过增加相同数值的padding-left来实现居中的解决方法。

摘要由CSDN通过智能技术生成

 
<html>
 
<head>
    <style type="text/css">
    body {
        text-align: center;
    }
 
    h1 {
        letter-spacing: -0.5em
    }
 
    h4 {
        letter-spacing: 100px
    }
 
    .handle {
        padding-left: 100px;
    }
    </style>
</head>
 
<body>
    <h1>登陆</h1>
    <h4>登陆1</h4>
    <h4 class="handle">登陆2</h4>
    <h2>正常登陆</h2>
</body>
 
</html>

letter-spacing能给文本加一个字间距，非常好用，但是带来的问题就是不居中，原因不明，但都是往左偏了一些。

解决方法：字间距是X px，则整个文本再加一个padding-left，同样是X px，效果图如下

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

左手喵子

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的文字间距letter-spacing的应用以及应用后不居中的显示

letter-spacing能给文本加一个字间距，非常好用，但是带来的问题就是不居中，原因不明，但都是往左偏了一些。解决方法：字间距是X px，则整个文本再加一个padding-left，同样是X px，效果图如下。
复制链接

扫一扫