Comment afficher l'exposant et l'indice du texte en CSS

En CSS, vous pouvez utiliser les valeurs d'attribut sub, super ou text-top, text-bottom de l'attribut vertical-align pour afficher l'exposant et l'indice du texte. Nous allons maintenant présenter l'attribut CSS vertical-align et la méthode d'affichage de l'exposant et de l'indice du texte, j'espère que cela vous sera utile.

propriété css vertical-align

propriété vertical-align est utilisée pour définir l'alignement vertical de elements Il définit l'alignement vertical de la ligne de base d'un élément en ligne par rapport à la ligne de base de son élément parent. [Recommandation du didacticiel vidéo : Tutoriel CSS]

L'attribut vertical-align peut définir l'alignement du contenu des cellules dans le tableau, il est compatible avec tous les navigateurs.

Utilisez les valeurs d'attribut text-top et text-bottom

Dans l'attribut CSS vertical-align, définissez la valeur de l'attribut text-top peut faire Le haut d'un élément en ligne est aligné avec le haut de la police de son élément parent, et la définition de la valeur de la propriété text-bottom aligne le bas d'un élément en ligne avec le bas de la police de son parent.

Prenons un exemple simple pour voir comment les valeurs des attributs text-top et text-bottom définissent l'exposant et l'indice du texte.

<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>上标</span></p>
    <p class="sub">一段测试文本，拥有<span>下标</span></p>
</div>

Utilisez d'abord les valeurs d'attribut text-top et text-bottom​​de l'attribut vertical-align pour corriger le texte dans la balise

Positionnez le haut et le bas, puis définissez la taille de la police du texte dans la balise pour avoir un exposant ou un indice.

Rendu :

Utiliser les valeurs des sous et super attributs

dans css Dans l'attribut vertical-align, la définition de la valeur du super attribut peut faire flotter l'élément en ligne à une certaine distance par rapport à l'élément parent où se trouve l'élément, formant un exposant pour le texte aligné verticalement et la définition de la valeur du sous-attribut peut rendre le ; élément en ligne par rapport à l'élément parent où se trouve l'élément. Déposez une certaine distance pour former un indice qui aligne le texte verticalement.

Jetons un coup d'œil à l'effet spécifique :

<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>上标</span></p>
    <p class="sub">一段测试文本，拥有<span>下标</span></p>
</div>

Rendu :

L'exposant, l'indice et autres actuels La taille du texte de l'élément parent est le même, ce qui n'est pas très beau. Vous pouvez définir la taille de la police de l'exposant et de l'indice sur 12px pour voir l'effet :

<.> Résumé : C'est tout pour cet article. L'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!