CSSで文字の上付きと下付きを表示する方法

CSS では、vertical-align 属性の sub、super、または text-top、text-bottom 属性値を使用して、テキストの上付き文字と下付き文字を表示できます。今回はcssのvertical-align属性と文字の上付き・下付きを表示する方法を紹介していきますので、参考になれば幸いです。

cssvertical-align プロパティ

vertical-align プロパティは、垂直方向の配置を設定するために使用されます。要素の親要素のベースラインに対するインライン要素のベースラインの垂直方向の配置を定義します。 [ビデオ チュートリアルの推奨: CSS チュートリアル ]

vertical-align 属性は、テーブル内のセルの内容の配置を設定でき、すべてのブラウザーと互換性があります。

text-top および text-bottom 属性値を使用する

CSS のvertical-align 属性で、text-top 属性値を設定すると、 make インライン要素の上部は親要素のフォントの上部に揃えられ、text-bottom プロパティ値を設定すると、インライン要素の下部が親のフォントの下部に揃えられます。

text-top 属性値と text-bottom 属性値がテキストの上付き文字と下付き文字をどのように設定するかを示す簡単な例を見てみましょう。

<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>

まず、vertical-align 属性の text-top 属性値と text-bottom 属性値を使用して、e388a4556c0f65e1904146cc1a846bee の上部と下部の 45a2772a6b6107b401db3c9b82c049c2gt; タグ内のテキストを固定します。 ; タグのテキストをその親要素に相対的に配置し、45a2772a6b6107b401db3c9b82c049c2 タグ内のテキストのフォント サイズを設定します。

レンダリング:

CSS でサブ属性値とスーパー属性値を使用する

vertical-align 属性では、super 属性値を設定すると、要素が配置されている親要素に対して一定の距離でインライン要素を浮動させることができ、垂直方向に配置されたテキストの上付き文字を形成し、sub 属性値を設定するとインライン要素を作成できます。要素が配置されている親要素を基準にして、テキストを垂直方向に整列させる下付き文字を形成するために、一定の距離をドロップします。

具体的な効果を見てみましょう:

<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>

レンダリング:

現在の上付き文字、下付き文字、およびその親要素 サイズテキストの内容は同じですが、あまり見栄えがよくありません。効果を確認するには、上付き文字と下付き文字のフォント サイズを 12 ピクセルに設定します。以上が記事の全文です。皆様の学習のお役に立てれば幸いです。

以上がCSSで文字の上付きと下付きを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。