So zeigen Sie hoch- und tiefgestellten Text in CSS an
在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属性值如何设置文字的上标和下标。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
首先使用vertical-align属性的text-top和text-bottom属性值,分别把标签内的文本固定在相对于其父元素
标签文本的顶端和底端的位置,再设置标签内的文本的字体大小,就拥有了一个上标或者下标。
效果图:
使用sub、super属性值
在css vertical-align属性中,设置super属性值可以让行内元素相对于该元素所在父元素上浮一定距离,形成垂直对齐文本的上标;而,设置sub属性值可以让行内元素相对于该元素所在父元素下沉一定距离,形成垂直对齐文本的下标。
下面我们来看看具体效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
效果图:
现在的上标、下标和其父元素文本的大小一致,不是很好看,可以把上标、下标的字体大小设置成12px,看看效果:
总结:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。
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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

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

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

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

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

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