css顯示文字上標(biāo)和下標(biāo)的方法

小編給大家分享一下css顯示文字上標(biāo)和下標(biāo)的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

 在css中，可以使用vertical-align 屬性的sub、super或者text-top、text-bottom屬性值來顯示文字的上標(biāo)和下標(biāo)。

css vertical-align屬性

vertical-align屬性是用來設(shè)置元素的垂直對齊方式的，它定義了行內(nèi)元素的基線相對于該元素所在父元素基線的垂直對齊。

vertical-align屬性可以在table表格中設(shè)置單元格內(nèi)容的對齊方式；它兼容所有的瀏覽器。

使用text-top、text-bottom屬性值

在css vertical-align屬性中，設(shè)置text-top屬性值可以讓行內(nèi)元素的頂端與其父元素字體的頂端對齊，而，設(shè)置text-bottom屬性值可以讓行內(nèi)元素的底端與其父元素字體的底端對齊。

下面我們通過一個簡單示例來看看text-top、text-bottom屬性值如何設(shè)置文字的上標(biāo)和下標(biāo)。

<style type="text/css">
    .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;
    }
</style>
<div class="demo">
    <p class="super">一段測試文本，擁有<span>上標(biāo)</span></p>
    <p class="sub">一段測試文本，擁有<span>下標(biāo)</span></p>
</div>

首先使用vertical-align屬性的text-top和text-bottom屬性值，分別把<span>標(biāo)簽內(nèi)的文本固定在相對于其父元素<p>標(biāo)簽文本的頂端和底端的位置，再設(shè)置<span>標(biāo)簽內(nèi)的文本的字體大小，就擁有了一個上標(biāo)或者下標(biāo)。

效果圖：

使用sub、super屬性值

在css vertical-align屬性中，設(shè)置super屬性值可以讓行內(nèi)元素相對于該元素所在父元素上浮一定距離，形成垂直對齊文本的上標(biāo)；而，設(shè)置sub屬性值可以讓行內(nèi)元素相對于該元素所在父元素下沉一定距離，形成垂直對齊文本的下標(biāo)。

下面我們來看看具體效果：

<style type="text/css">
    .demo{
        font-size: 20px;
    }
    .sup span{
        vertical-align: super;
        color: red;
    }
    .sub span{
        vertical-align: sub;
        color: red;
    }
</style>
<div class="demo">
    <p class="sup">一段測試文本，擁有<span>上標(biāo)</span></p>
    <p class="sub">一段測試文本，擁有<span>下標(biāo)</span></p>
</div>

效果圖：

現(xiàn)在的上標(biāo)、下標(biāo)和其父元素文本的大小一致，不是很好看，可以把上標(biāo)、下標(biāo)的字體大小設(shè)置成12px，看看效果：

看完了這篇文章，相信你對css顯示文字上標(biāo)和下標(biāo)的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！