php 上标和下标,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;

}

.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，看看效果：

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

php 上标和下标,css如何显示文字的上标和下标相关推荐

html怎么设计上标,css如何显示文字的上标和下标
cssvertical-align属性 vertical-align属性是用来设置元素的垂直对齐方式的,它定义了行内元素的基线相对于该元素所在父元素基线的垂直对齐.[视频教程推荐:CSS教程] ver ...
css隐藏/显示文字的方法
最近做了一个demo,写了一个图片轮播,在图片轮播的时候显示对图片的文字解释,要求文字不跟随图片滚动默认显示.花了一点点时间,解决了这个办法,最后总结了一下在html中用css隐藏文字的方法. (1) ...
a上标3下标6算法_Word用快捷键给文字插入上标和下标，并同时添加上下标
在 Word 中,既可以给字母.单词添加上标和下标,又可以给汉字添加:添加的方法有两种,一种是用快捷键添加,另一种是用鼠标选择添加.另外,还可以给它们同时添加上下标,但 Word 没有提供直接添加功能 ...
css: transform导致文字显示模糊
css: transform导致文字显示模糊有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
css 固定内容显示范围,css之让文字在一定范围内显示，不超过固定的宽度和高度...
首先我们设置类如:.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;} 解决让文字不超出CSS盒子 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
JS CSS 超出字符省略号，获取字符串实际所占长度，显示文字提示tooltip
CSS 超出字符省略号 .a{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } JS获取字符串实际所占长度 compute ...
css如何让文字不换行,css如何让文字不换行显示？
在CSS中,可以通过white-space属性来实现文字不换行显示:只要将white-space属性的值为nowrap就可强制文字不换行. white-space属性指定元素内的空白怎样处理.它有以下 ...
css中横线中间显示文字
css中横线中间显示文字,类似文档地图注脚 <div style="width:100%;height:36px;line-height:36px;display:flex;" ...

php 上标和下标,css如何显示文字的上标和下标

php 上标和下标,css如何显示文字的上标和下标相关推荐

最新文章

热门文章