Heim Web-Frontend CSS-Tutorial So zeigen Sie hoch- und tiefgestellten Text in CSS an

So zeigen Sie hoch- und tiefgestellten Text in CSS an

Dec 20, 2018 am 10:53 AM
css

在css中,可以使用vertical-align 属性的sub、super或者text-top、text-bottom属性值来显示文字的上标和下标。下面我们就来介绍一下css vertical-align属性,显示文字的上标和下标的方法,希望对你们有所帮助。

So zeigen Sie hoch- und tiefgestellten Text in CSS an

css vertical-align属性

vertical-align属性是用来设置元素的垂直对齐方式的,它定义了行内元素的基线相对于该元素所在父元素基线的垂直对齐。【视频教程推荐:CSS教程

vertical-align属性可以在table表格中设置单元格内容的对齐方式;它兼容所有的浏览器。

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

在css vertical-align属性中,设置text-top属性值可以让行内元素的顶端与其父元素字体的顶端对齐,而,设置text-bottom属性值可以让行内元素的底端与其父元素字体的底端对齐。

下面我们通过一个简单示例来看看text-top、text-bottom属性值如何设置文字的上标和下标。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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

Nach dem Login kopieren

首先使用vertical-align属性的text-top和text-bottom属性值,分别把标签内的文本固定在相对于其父元素

标签文本的顶端和底端的位置,再设置标签内的文本的字体大小,就拥有了一个上标或者下标。

效果图:

So zeigen Sie hoch- und tiefgestellten Text in CSS an

使用sub、super属性值

在css vertical-align属性中,设置super属性值可以让行内元素相对于该元素所在父元素上浮一定距离,形成垂直对齐文本的上标;而,设置sub属性值可以让行内元素相对于该元素所在父元素下沉一定距离,形成垂直对齐文本的下标。

下面我们来看看具体效果:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

Nach dem Login kopieren

效果图:

So zeigen Sie hoch- und tiefgestellten Text in CSS an

现在的上标、下标和其父元素文本的大小一致,不是很好看,可以把上标、下标的字体大小设置成12px,看看效果:

So zeigen Sie hoch- und tiefgestellten Text in CSS an

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

Das obige ist der detaillierte Inhalt vonSo zeigen Sie hoch- und tiefgestellten Text in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie spiele ich Bildsequenzen reibungslos mit CSS -Animation? Wie spiele ich Bildsequenzen reibungslos mit CSS -Animation? Apr 04, 2025 pm 05:57 PM

Wie kann man die Wiedergabe von Bildern wie Videos erreichen? Oft müssen wir ähnliche Video -Player -Funktionen implementieren, aber der Wiedergabinhalt ist eine Folge von Bildern. direkt...

Wie können Sie sicherstellen, dass einige Vorgänge nur einmal ausgeführt werden, wenn der Useffect Hook in Reacts App.tsx verwendet wird? Wie können Sie sicherstellen, dass einige Vorgänge nur einmal ausgeführt werden, wenn der Useffect Hook in Reacts App.tsx verwendet wird? Apr 04, 2025 pm 06:33 PM

In React -Projekten stoßen wir häufig auf Probleme mit der Verwendung von Lebenszyklusfunktionen, insbesondere wenn es um die Aktualisierung von Seiten geht, wie man nur bestimmte Operationen sicherstellt ...

Die Breite der EMSP -Räume in HTML ist inkonsistent. Wie kann ich eine zuverlässige Texteinrückung implementieren? Die Breite der EMSP -Räume in HTML ist inkonsistent. Wie kann ich eine zuverlässige Texteinrückung implementieren? Apr 04, 2025 pm 11:57 PM

In Bezug auf das Problem der inkonsistenten Breite von EMSP -Räumen in HTML- und chinesischen Charakteren in vielen Web -Tutorials wird erwähnt, dass die Breite eines chinesischen Charakters, aber die tatsächliche Situation nicht ...

Wie verwendet ich Vue 3, um die Ladefunktion der Bildlaufladen ähnlich wie bei WeChat -Chat -Datensätzen zu implementieren? Wie verwendet ich Vue 3, um die Ladefunktion der Bildlaufladen ähnlich wie bei WeChat -Chat -Datensätzen zu implementieren? Apr 04, 2025 pm 03:51 PM

Wie kann man nach oben scrollen laden, ähnlich wie bei WeChat -Chat -Datensätzen? Bei der Entwicklung von Anwendungen ähnlich wie bei WeChat -Chat -Aufzeichnungen ist eine gemeinsame Frage, wie ...

Wie kann ich CSS verwenden, um einen reibungslosen Wiedergabetasteffekt von Bildsequenzen zu erzielen? Wie kann ich CSS verwenden, um einen reibungslosen Wiedergabetasteffekt von Bildsequenzen zu erzielen? Apr 04, 2025 pm 04:57 PM

Wie kann man die Funktion des Spielens von Bildern wie Videos erkennen? Oft müssen wir in der Anwendung ähnliche Video -Wiedergabeffekte erzielen, aber der Wiedergabeinhalt ist nicht ...

Wie implementieren Sie eine enge Übergangsanimation in React mithilfe der React-Transition-Gruppe? Wie implementieren Sie eine enge Übergangsanimation in React mithilfe der React-Transition-Gruppe? Apr 04, 2025 pm 11:27 PM

Verwendung von React-Transition-Gruppen in React, um Verwirrung über eng nach Übergangsanimationen zu erreichen. In React-Projekten werden viele Entwickler sich für die React-Übergangsgruppenbibliothek für ...

【Rost-Selbststudie】 Einführung 【Rost-Selbststudie】 Einführung Apr 04, 2025 am 08:03 AM

1.0.1 Vorwort Dieses Projekt (einschließlich Code und Kommentare) wurde während meines Autodidakt-Rostes aufgezeichnet. Es kann ungenaue oder unklare Aussagen geben. Bitte entschuldigen Sie sich. Wenn Sie davon profitieren, ist es noch besser. 1.0.2 Warum ist Rustrust zuverlässig und effizient? Rost kann C und C mit ähnlicher Leistung, aber höherer Sicherheit ersetzen, und erfordert keine häufige Neukompilation, um auf Fehler wie C und C zu prüfen. Thread-Safe (stellen Sie sicher, dass Multi-Thread-Code vor der Ausführung sicher ist). Vermeiden Sie undefiniertes Verhalten (z. B. Array aus Grenzen, nicht initialisierte Variablen oder Zugriff auf den freien Speicher). Rust bietet moderne Sprachmerkmale wie Generika

Wie baue ich schnell eine Vordergrundseite in einem React Vite -Projekt mit KI -Tools? Wie baue ich schnell eine Vordergrundseite in einem React Vite -Projekt mit KI -Tools? Apr 04, 2025 pm 01:45 PM

Wie baue ich schnell eine Front-End-Seite in der Back-End-Entwicklung? Als Backend -Entwickler mit drei oder vier Jahren Erfahrung hat er das grundlegende JavaScript, CSS und HTML gemeistert ...

See all articles