css下标怎么打,css如何显⽰⽂字的上标和下标
在css中，可以使⽤vertical-align 属性的sub、super或者text-top、text-bottom属性值来显⽰⽂字的上标和下标。下⾯我们就来介绍⼀下css vertical-align属性，显⽰⽂字的上标和下标的⽅法，希望对你们有所帮助。
css vertical-align属性
vertical-align属性是⽤来设置元素的垂直对齐⽅式的，它定义了⾏内元素的基线相对于该元素所在⽗元素基线的垂直对齐。【视频教程推荐：CSS教程】
vertical-align属性可以在table表格中设置单元格内容的对齐⽅式；它兼容所有的浏览器。
使⽤text-top、text-bottom属性值
在css vertical-align属性中，设置text-top属性值可以让⾏内元素的顶端与其⽗元素字体的顶端对齐，⽽，设置text-bottom属性值可以让⾏内元素的底端与其⽗元素字体的底端对齐。
下⾯我们通过⼀个简单⽰例来看看text-top、text-bottom属性值如何设置⽂字的上标和下标。
.demo{
font-size: 20px;
}
css怎么创建.super span{
vertical-align: text-top;
font-size: 12px;
color: red;
}
.sub span{
vertical-align: text-bottom;
font-size: 12px;
color: red;
}
⼀段测试⽂本，拥有上标
⼀段测试⽂本，拥有下标
⾸先使⽤vertical-align属性的text-top和text-bottom属性值，分别把标签内的⽂本固定在相对于其⽗元素
标签⽂本的顶端和底端的位置，再设置标签内的⽂本的字体⼤⼩，就拥有了⼀个上标或者下标。
效果图：
使⽤sub、super属性值
在css vertical-align属性中，设置super属性值可以让⾏内元素相对于该元素所在⽗元素上浮⼀定距离，形成垂直对齐⽂本的上标；⽽，设置sub属性值可以让⾏内元素相对于该元素所在⽗元素下沉⼀定距离，形成垂直对齐⽂本的下标。
下⾯我们来看看具体效果：
.demo{
font-size: 20px;
}
.sup span{
vertical-align: super;
color: red;
}
.sub span{
vertical-align: sub;
color: red;
}
⼀段测试⽂本，拥有上标
⼀段测试⽂本，拥有下标
效果图：
现在的上标、下标和其⽗元素⽂本的⼤⼩⼀致，不是很好看，可以把上标、下标的字体⼤⼩设置成12px，看看效果：
总结：以上就是本篇⽂章的全部内容，希望能对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。