CSS中文本居中有哪些

咱们也不过的花里胡哨直奔主题。
详解Text-align
我们得知道text-align是干嘛的? text-align 用于设置或者检索元素中的水平对齐方式。
哪text-align 常用的有哪些属性呢? 左对齐(text-align: left;) 居中(text-align:center); 右对齐text-align:right;
可不止只有这三种属性哈,先说说这个三个属性。
1.left 文本左对齐
在这里插入图片描述

效果:这个是浏览器默认对于文字的处理,和这个属性无关 。
1.1 还是这个张图,加上 text-align:center; 并没有发什么什么变化,因为文本的默认就是text-align:center;
1.2 再看英文和汉字,英文会因为空格折行。准确的说是以单词为单位进行合理折行。并不是以字母为单位。这样就好理解许多。
中文看就来就更好一些了,因为我们的字符比较短。折行是以中文文字拆分的。所以看起来就没有那么大的空隙。

2.right 文本右对齐。这个和left一样,只是方向不一致

3.center 文本居中展示。 准确的说是每行文本居中显示。

除了左对齐,居中,右对齐,其实还有左右对齐。这个我们暂时先不说,先说说剩下的三个属性:start,end,justify

我们先了解一下 start和end属性。这两个是CSS3的属性,它们有什么用呢?

我们使用一下,看看效果就知道了。

在这里插入图片描述在这里插入图片描述
有没有感到很诧异,这不就是左右对齐嘛? 没错,看起来效果和左右对齐一样,那我们再深入的问一下,为什么要
有这两个属性。
start:内容对齐开始边界
end:内容对齐结束边界
单纯这么一分析和左右对齐真的没什么区别啊,这个两个属性的设置是根据浏览器的设置进行操作的,什么意思呢?
红色字体 对于浏览器我们可以设置,文字的排版方向,是自左向右,还是自右向左。
这时 start 和 end 就有用了。文字的排版方向决定了他的开始与结束。默认情况
下是自左向右,我们会使用左对齐。如果文字排版自右向左,我们默认是右对齐。
这时 CSS 没有办法确定默认设置是自左向右,还是自右向左。这时我们无论设
置 left 还是 right 都不好,还无法获取浏览器的默认排版方式。这时我们通过
text-align: start;来设置,意义是选择内容开始边界。无论你是自左向右,或者自
右向左。这个属性都可以根据你的设置自动切换
红色字体

只有当你确定它不会引入自左向右或者自右向左(rtl / lrt)语言的本地化问题时,最好使用左右对齐。
左右对齐:justify

注意 英文是调整空格大小来实现左右对齐。而中文是调整每个字符中间的空隙来实现左右对齐。
如果元素有pre或pre-wrap的white-space的属性值,则该元素的文本内容的字形及空格
都不能被更改以用于对齐

这里面还提到了 letter-spacing 和 word-spacing,这两个属性,查了一下这个两个属性是干嘛的。
letterletter-spacing 就是用于定义两个字形间的水平距离。
word-spacing 就是用于定义两个单词间的水平距离。
其实左右对齐的本质就是调整单词或者字符间的间距实现左右对齐的。
感谢观看。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值