Detaillierte Einführung in CSS, umfassendes Verständnis der vertikalen Ausrichtung

Vorlesung 1: Grundlegendes Verständnis der Vertical-Align-Familie

Verstehen der Attributwerte und der Zusammensetzung, die von Vertical-Align unterstützt werden

Attribute:

1. erben

Zeilenklasse

> Superscript- und Index-Kategorien

0px, 2EM, 20%

, alle unterstützen den negativen Rand, die Briefenabstands-Word-Abstand vertikal-align, und das Verhalten ist konsistent. Die entsprechende numerische Größe wird basierend auf der Grundlinienausrichtung nach oben und unten versetzt.         Vertical-align Der Prozentwert wird relativ zur Zeilenhöhe berechnet.

Vorlesung 2 Die Voraussetzung dafür, dass die vertikale Ausrichtung funktioniert

Besprechen Sie die Auswirkungen verschiedener Anzeigewerte auf die vertikale Ausrichtung

Es gibt Bedingungen, damit die vertikale Ausrichtung funktioniert . Anwendung Inline-Ebene und Tabellenzellenelemente

Inline-Ebenenelemente

img span strong em

Inline-Block-Eingabe

Tabellenzellenelement

.table-cell:

Standardzustand: Bilder, Schaltflächen, Text und Zellen

1.Anzeige: Anzeige der Elementebene ändern

2.css deklariert die Anzeigeebene der Elementänderung

IMG-Tags in einem P-Label einrichten Vertical-Align: Mitte Bilder sind nicht in der Mitte

Aber es ist zu kurz und nicht zentriert genug

Tatsächlicher Kampf: Mehrzeiliger Text und Bilder vertikal zentrieren

                         <                                                                           

                                                                          ; Breite: 210 px; vertikal - align:middle;

Vertical- Der Ausrichtungsprozentsatz wird relativ zum Zeilenhöhenwert berechnet.                                       Am unteren Rand des Inline-Bildes befindet sich ein Leerzeichen. Die Lösung besteht darin, die Zeilenhöhe zu entfernen oder die vertikalen Ausrichtungsattribute unten, oben und in der Mitte zu ändern 🎜>

Vertical-align:middle;line-height:36px;

Wenn die Beschriftung auf eine Zeilenhöhe eingestellt ist, die größer als das Bild ist, wird das Bild ungefähr vertikal zentriert.

Das vierte Kapitel: Vertiefendes Verständnis des Attributwerts der vertikal ausgerichteten Linie

Das Verhalten der unteren Zeile, der oberen Zeile und der mittleren Zeile

vertikal-align:bottom

1.inline/inline-block-Element: Richten Sie den unteren Rand des Elements am unteren Rand der gesamten Zeile aus

2.table-cell-Element: Richten Sie die Polsterkante der Zelle am unteren Rand aus der Tabellenzeile

Vertical-align: TOP

Vertical-Middle

1.inline/Inline-Block Element: Der vertikale Mittelpunkt des Elements und des übergeordneten Elements Grundlinie 1/2 x-Höhenausrichtung

2 2 .table-cell-Element: Das Zellenauffüllfeld ist relativ zur äußeren Tabellenzeile zentriert.

Ungefährer vertikaler Zentrierungswert

vertikal -align:text-top/text-bottom

Definition

1.vertical-algin:text-top

Der obere und übergeordnete Mittelpunkt der Box – obere Ausrichtung des Bereichs

2.vertical-align:text-bottom

Der untere Rand des Felds ist am unteren Rand des übergeordneten Inhaltsbereichs ausgerichtet

1. Die Position des Elements „vertikal ausrichten“ hat nichts mit den Elementen davor und danach zu tun. Die Position der vertikalen Ausrichtung hat nichts mit der Zeilenhöhe zu tun, sie hängt mit der Schriftgröße zusammen

Tatsächlicher Effekt

Ausrichtungseffektbild von Emoticon und Text (16x16)

                                                                                                                                                                                                                                                                           Hochgestellte und tiefgestellte Klassen

1. Hochgestellt in HTML

2. Tiefgestellt in HTML

Die kleinere Größe beträgt 75 % der Originalschrift size

1. ^{-->vertical-align:super}

2. _{-->vertical-align:sub}

Definition

1.vertical-align:super

Heben Sie die Grundlinie des Felds auf die entsprechende hochgestellte Grundlinienposition des übergeordneten Elements an.

2.vertical-align:sub

Senken Sie die Grundlinie des Felds auf die entsprechende tiefgestellte Grundlinienposition des übergeordneten Elements.

Praktische Anwendung

Kapitel 7: Der inkonsistente Mechanismus der vertikalen Ausrichtung

Das Verhalten benachbarter Elemente mit unterschiedlicher vertikaler Ausrichtung

Wann Wann gibt es Keine Konsistenz vor und nach dem Erscheinen,

Befolgen Sie die aktuellen Elemente und die Vaterebene,

hatte keinen direkten Einfluss

die achte vertikale Ausrichtung war schlecht kompatibel

IE6/7

Firefox/Chrome

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS, umfassendes Verständnis der vertikalen Ausrichtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!