Verwenden Sie CSS, um verschiedene Zentrierungsmethoden zu implementieren

Dieser Artikel stellt hauptsächlich die Methoden zur Verwendung von CSS vor, um verschiedene Zentrierungen zu erreichen. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.

Zentrierung bedeutet, dass wir CSS für das Layout verwenden . Eine Situation, die häufig vorkommt. Bei der Verwendung von CSS zum Zentrieren reicht manchmal ein einzelnes Attribut aus, und manchmal sind bestimmte Fähigkeiten erforderlich, um mit allen Browsern kompatibel zu sein. Dieser Artikel gibt eine kurze Einführung in einige gängige Zentrierungsmethoden.

Hinweis: Sofern nicht anders angegeben, sind die in diesem Artikel beschriebenen Methoden mit gängigen Browsern wie IE6+, Google und Firefox kompatibel.

Lassen Sie uns zunächst über einige einfache und harmlose Zentrierungsmethoden sprechen

Stellen Sie den Rand auf „Automatisch“

Konkret zentrieren Sie einfach das Element, das Sie zentrieren möchtenmargin-left und margin-right sind beide auf auto gesetzt. Diese Methode kann nur eine horizontale Zentrierung durchführen und ist für schwebende Elemente oder absolut positionierte Elemente ungültig.

Verwenden Sie text-align:center

Dazu gibt es nichts zu sagen. Sie können Bilder, Schaltflächen, Text und andere Inline-Elemente nur horizontal ausrichten (display ist inline oder inline-block usw.) Zentriert. Es sollte jedoch beachtet werden, dass es in den beiden seltsamen Browsern IE6 und 7 jedes Element horizontal zentrieren kann.

Verwenden Sie die Zeilenhöhe, um eine einzelne Textzeile vertikal zu zentrieren.

Stellen Sie line-height des Texts auf die Höhe des übergeordneten Textcontainers ein, was für Situationen geeignet ist, in denen dies nur der Fall ist eine Textzeile.

4. Verwenden Sie Tabellen

Wenn Sie eine Tabelle verwenden, müssen Sie sich über verschiedene Zentrierungsprobleme überhaupt keine Gedanken machen, solange Sie td-Elemente (möglicherweise auch th) verwenden Die beiden Attribute align="center" und valign="middle" können die horizontale und vertikale Zentrierung des darin enthaltenen Inhalts perfekt handhaben, und die Tabelle zentriert den darin enthaltenen Inhalt standardmäßig vertikal. Wenn Sie die Zentrierung des Tabelleninhalts in css steuern möchten, können Sie vertical-align:middle für die vertikale Zentrierung verwenden. Für die horizontale Zentrierung scheint es in css kein entsprechendes Attribut zu geben, in IE6 und 7 ist dies jedoch möglich Verwenden Sie text-align:center, um die Elemente in der Tabelle horizontal zu zentrieren. text-align:center funktioniert in IE8+ und Google, Firefox und anderen Browsern nur bei Inline-Elementen und ist bei Blockelementen ungültig.

In IE6 und 7 können Sie csss text-algin verwenden, um die horizontale Ausrichtung des Tabelleninhalts zu steuern, unabhängig davon, ob der Inhalt vorhanden ist Ein Inline-Element oder ein Blockelement sind gültig.

Aber in IE8+ und chrome, firefox und anderen Browsern ist text-align:center für Blockelemente ungültig und nur das tabelleneigene align-Attribut kann verwendet werden.

Verwenden Sie display:table-cell to center

Für die Elemente, die keine Tabellen sind, können wir display:table-cell verwenden, um sie als Tabellenzelle zu simulieren, damit wir die Vorteile nutzen können Tisch. Praktische Zentrierfunktion. Zum Beispiel:


Diese Methode kann jedoch nur in IE8+, Google, Firefox und anderen Browsern verwendet werden und ist für IE6 und IE7 ungültig.

Die dort genannten Methoden sind alle sehr einfach und können natürlich nicht als ausgefallene Tricks bezeichnet werden. Hier sind einige Zentriermethoden, die einige Fähigkeiten erfordern.

Verwenden Sie die absolute Positionierung zur Zentrierung

Diese Methode funktioniert nur für Elemente, deren Breite oder Höhe wir bereits kennen. Das Prinzip der absoluten Positionierung

besteht darin, das Attribut left oder top des absolut positionierten Elements auf 50% zu setzen. Zu diesem Zeitpunkt ist das Element nicht zentriert, sondern weiter entfernt von Es ist um die halbe Breite oder Höhe des Elements nach rechts oder links versetzt, daher müssen Sie einen negativen margin-left- oder margin-top-Wert verwenden, um es wieder in die zentrierte Position zu bringen ist die halbe Breite oder Höhe des Elements. margin
Bedieneffekt:

Wenn Sie nur eine Zentrierung in eine Richtung erreichen möchten, können Sie nur

, left verwenden, um eine horizontale Zentrierung zu erreichen , verwenden Sie margin-left ,top, um eine vertikale Zentrierung zu erreichen. margin-top

Eine andere Möglichkeit zur Zentrierung durch absolute Positionierung

Diese Methode funktioniert auch nur für Elemente, deren Breite oder Höhe wir bereits kennen, und unterstützt leider nur IE9+, Google, Firefox und andere moderne Browser, die diese Anforderungen erfüllen mit W3C-Standards.

Das Folgende ist ein Code zum Verständnis dieser Methode:

Betriebseffekt:

Wenn die Breite und Höhe des Elements nicht definiert sind hier, dann er Die Breite wird durch die Werte von links und rechts bestimmt, und die Höhe wird durch die Werte von oben und unten bestimmt, daher müssen Höhe und Breite des Elements festgelegt werden . Wenn Sie gleichzeitig die Werte von links, rechts, oben und unten ändern, können Sie das Element auch in eine bestimmte Richtung verschieben. Sie können es selbst versuchen.

Verwenden Sie Floats mit relativer Positionierung, um horizontal zu zentrieren

Diese Methode ist auch eine Lösung, um schwebende Elemente horizontal zu zentrieren, und wir müssen die Breite des Elements nicht kennen, das benötigt wird zentriert sein.

Das Prinzip der schwebenden Zentrierung besteht darin, das schwebende Element relativ zur Breite des übergeordneten Elements zu positionieren 50%, aber zu diesem Zeitpunkt ist das Element nicht zentriert, sondern um die Hälfte seiner Breite breiter als die zentrierte Position. , dann müssen Sie die relative Positionierung für die darin enthaltenen untergeordneten Elemente verwenden, um die zusätzliche Hälfte seiner eigenen Breite zurückzubringen. Und da die relative Positionierung relativ zu sich selbst erfolgt, muss die Hälfte seiner eigenen Breite nur left oder erhalten Sie, indem Sie es auf right setzen, sodass Sie nicht wissen müssen, wie breit es tatsächlich ist. 50%

Diese Methode der Verwendung von Floats und der relativen Positionierung zur Mitte hat den Vorteil, dass Sie die Breite des zu zentrierenden Elements nicht kennen müssen, selbst wenn sich die Breite ständig ändert ein zusätzliches Element, um das zu zentrierende Element zu umschließen.

Sehen Sie sich den Code an:

Laufeffekt:

Verwenden Sie die Schriftgröße, um eine vertikale Zentrierung zu erreichen

Wenn Die Höhe des übergeordneten Elements ist bekannt. Wenn Sie die untergeordneten Elemente darin horizontal und vertikal zentrieren möchten, können Sie diese Methode verwenden. Die Breite oder Höhe der untergeordneten Elemente muss nicht bekannt sein.

Diese Methode ist nur für IE6 und IE7 gültig.

Der Kernpunkt dieser Methode besteht darin, einen geeigneten

-Wert für das übergeordnete Element festzulegen. Der Wert dieses Werts ist die Höhe des übergeordneten Elements dividiert durch 1,14, und das untergeordnete Element muss ein oder font-size Element, müssen Sie das Attribut inline hinzufügen. inline-blockvertical-align:middleWarum es durch 1,14 statt durch andere Zahlen geteilt wird, weiß niemand wirklich. Man muss sich nur die Zahl 1,14 merken.

Wie in Methode 5 erwähnt, können Sie

verwenden, um eine Zentrierung in aktuellen Browsern wie IE8+, Firefox und Google durchzuführen, und hier ist -Methode ist auf IE6 und IE7 anwendbar, sodass die Kombination dieser beiden Methoden mit allen Browsern kompatibel sein kann:

display:table-cellfont-size

Oben Im Beispiel: Da das zu zentrierende Element ein Blockelement ist, müssen wir es auch in ein Inline-Element umwandeln. Wenn das zu zentrierende Element ein Inline-Element wie ein Bild ist, kann dieser Schritt weggelassen werden.

Wenn außerdem

in der Mitte des übergeordneten Elements geschrieben wird, ist dies eine Situation, die wir häufig bei der Verwendung von CSS für das Layout antreffen. Bei der Verwendung von CSS zum Zentrieren reicht manchmal ein einzelnes Attribut aus, und manchmal sind bestimmte Fähigkeiten erforderlich, um mit allen Browsern kompatibel zu sein. Dieser Artikel gibt eine kurze Einführung in einige gängige Zentrierungsmethoden.

Hinweis: Sofern nicht anders angegeben, sind die in diesem Artikel beschriebenen Methoden mit gängigen Browsern wie IE6+, Google und Firefox kompatibel. vertical-align:middle

Lassen Sie uns zunächst über einige einfache und harmlose Zentrierungsmethoden sprechen

Stellen Sie den Rand auf „Automatisch“

Konkret zentrieren Sie einfach das Element, das Sie zentrieren möchten

und

sind beide auf

gesetzt. Diese Methode kann nur eine horizontale Zentrierung durchführen und ist für schwebende Elemente oder absolut positionierte Elemente ungültig. margin-leftmargin-rightVerwenden Sie text-align:centerauto

Dazu gibt es nichts zu sagen. Sie können Bilder, Schaltflächen, Text und andere Inline-Elemente nur horizontal ausrichten (

ist

oder

usw.) Zentriert. Es sollte jedoch beachtet werden, dass es in den beiden seltsamen Browsern IE6 und 7 jedes Element horizontal zentrieren kann. displayinlineVerwenden Sie die Zeilenhöhe, um eine einzelne Textzeile vertikal zu zentrieren. inline-block

Stellen Sie

des Texts auf die Höhe des übergeordneten Textcontainers ein, was für Situationen geeignet ist, in denen dies nur der Fall ist eine Textzeile.

4. Verwenden Sie Formulareline-height

Wenn Sie eine Tabelle verwenden, müssen Sie sich über verschiedene Zentrierungsprobleme überhaupt keine Gedanken machen. Verwenden Sie einfach die Attribute align="center" und valign="middle" des td-Elements (und möglicherweise des th-Elements). Es verarbeitet die Horizontale perfekt und vertikale Zentrierung des darin enthaltenen Inhalts, und die Tabelle zentriert den darin enthaltenen Inhalt standardmäßig vertikal. Wenn Sie die Zentrierung des Tabelleninhalts in css steuern möchten, können Sie vertical-align:middle für die vertikale Zentrierung verwenden. Für die horizontale Zentrierung scheint es in css kein entsprechendes Attribut zu geben, in IE6 und 7 ist dies jedoch möglich Verwenden Sie text-align:center, um die Elemente in der Tabelle horizontal zu zentrieren. text-align:center funktioniert in IE8+ und Google, Firefox und anderen Browsern nur bei Inline-Elementen und ist bei Blockelementen ungültig.

In IE6 und 7 können Sie csss text-algin verwenden, um die horizontale Ausrichtung des Tabelleninhalts zu steuern, unabhängig davon, ob der Inhalt vorhanden ist Ein Inline-Element oder ein Blockelement sind gültig.

Aber in IE8+ und chrome, firefox und anderen Browsern ist text-align:center für Blockelemente ungültig und nur das tabelleneigene align-Attribut kann verwendet werden.

Verwenden Sie display:table-cell to center

Für die Elemente, die keine Tabellen sind, können wir display:table-cell verwenden, um sie als Tabellenzelle zu simulieren, damit wir die Vorteile nutzen können Tisch. Praktische Zentrierfunktion. Zum Beispiel:


Diese Methode kann jedoch nur in IE8+, Google, Firefox und anderen Browsern verwendet werden und ist für IE6 und IE7 ungültig.

Die dort genannten Methoden sind alle sehr einfach und können natürlich nicht als ausgefallene Tricks bezeichnet werden. Hier sind einige Zentriermethoden, die einige Fähigkeiten erfordern.

Verwenden Sie die absolute Positionierung zur Zentrierung

Diese Methode funktioniert nur für Elemente, deren Breite oder Höhe wir bereits kennen. Das Prinzip der

absoluten Positionierung zur Zentrierung besteht darin, das Attribut left oder top des absolut positionierten Elements auf 50% zu setzen. Zu diesem Zeitpunkt ist das Element nicht zentriert, sondern weiter entfernt die Mitte. Es ist um die halbe Breite oder Höhe des Elements nach rechts oder links versetzt, daher müssen Sie einen negativen margin-left- oder margin-top-Wert verwenden, um es wieder in die zentrierte Position zu bringen Der Wert ist die Hälfte der Breite oder Höhe des Elements. margin
Bedieneffekt:

Wenn Sie nur eine Zentrierung in eine Richtung erreichen möchten, können Sie nur

, left verwenden, um eine horizontale Zentrierung zu erreichen , verwenden Sie margin-left ,top, um eine vertikale Zentrierung zu erreichen. margin-top

Eine andere Möglichkeit zur Zentrierung mithilfe der absoluten Positionierung

Diese Methode funktioniert auch nur für Elemente, deren Breite oder Höhe wir bereits kennen, und unterstützt leider nur IE9+, Google, Firefox und andere moderne Browser, die diese Anforderungen erfüllen mit W3C-Standards.

Das Folgende ist ein Code zum Verständnis dieser Methode:

Laufeffekt:

Wenn die Breite und Höhe des Elements sind hier nicht definiert, dann wird seine Breite durch die Werte von links und rechts bestimmt, und seine Höhe wird durch die Werte von oben und unten bestimmt, also müssen Höhe und Breite des Elements festgelegt werden eingestellt werden. Wenn Sie gleichzeitig die Werte von links, rechts, oben und unten ändern, kann das Element auch in eine bestimmte Richtung versetzt werden. Sie können es selbst versuchen.

Verwenden Sie Floats mit relativer Positionierung zur horizontalen Zentrierung

Diese Methode ist auch eine Lösung für die horizontale Zentrierung schwebender Elemente, und wir müssen die Breite des Elements nicht kennen, das benötigt wird zentriert sein.

Das Prinzip der schwebenden Zentrierung besteht darin, das schwebende Element relativ zur Breite des übergeordneten Elements zu positionieren

, aber zu diesem Zeitpunkt ist das Element nicht zentriert, sondern um die Hälfte seiner Breite breiter als die zentrierte Position. , dann müssen Sie die relative Positionierung für die darin enthaltenen untergeordneten Elemente verwenden, um die zusätzliche Hälfte seiner eigenen Breite zurückzubringen. Und da die relative Positionierung relativ zu sich selbst erfolgt, muss die Hälfte seiner eigenen Breite nur 50% oder erhalten Sie, indem Sie es auf left setzen, sodass Sie nicht wissen müssen, wie breit es tatsächlich ist. right

Diese Methode der schwebenden und relativen Positionierung zur Mitte hat den Vorteil, dass Sie die Breite des zu zentrierenden Elements nicht kennen müssen, selbst wenn sich die Breite ständig ändert. Der Nachteil besteht darin, dass ein zusätzliches Element erforderlich ist um das Element so einzuwickeln, dass es zentriert wird.

Sehen Sie sich den Code an:

Laufeffekt:

Verwenden Sie die Schriftgröße, um eine vertikale Zentrierung zu erreichen

Wenn Die Höhe des übergeordneten Elements ist bekannt. Wenn Sie die untergeordneten Elemente darin horizontal und vertikal zentrieren möchten, können Sie diese Methode verwenden. Die Breite oder Höhe der untergeordneten Elemente muss nicht bekannt sein.

Diese Methode ist nur für IE6 und IE7 gültig.

Der Kernpunkt dieser Methode besteht darin, einen geeigneten font-size-Wert für das übergeordnete Element festzulegen. Der Wert dieses Werts ist die Höhe des übergeordneten Elements dividiert durch 1,14, und das untergeordnete Element muss ein oder inline Element, müssen Sie das Attribut inline-block hinzufügen. vertical-align:middle

Warum es durch 1,14 statt durch andere Zahlen geteilt wird, weiß niemand wirklich. Man muss sich nur die Zahl 1,14 merken.

Wie in Methode 5 erwähnt, können Sie mit

eine Zentrierung in aktuellen Browsern wie IE8+, Firefox, Google usw. durchführen. und hier ist -Methode ist für IE6 und IE7 geeignet, sodass die Kombination dieser beiden Methoden mit allen Browsern kompatibel sein kann: display:table-cellfont-size

Above In Da das zu zentrierende Element ein Blockelement ist, müssen wir es im Beispiel auch in ein Inline-Element umwandeln. Wenn das zu zentrierende Element ein Inline-Element wie ein Bild ist, kann dieser Schritt weggelassen werden.

Außerdem ist dies auch möglich, wenn

im übergeordneten Element statt im untergeordneten Element geschrieben wird, aber der bei der Berechnung von

verwendete Wert von 1,14 wird ungefähr 1,5. vertical-align:middlefont-sizeDie oben genannten sind einige gängige Zentriermethoden. Sollten Auslassungen oder Fehler vorhanden sein, korrigieren Sie diese bitte!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS, um einen Schatteneffekt zu erzielen

CSS3 Implementieren Sie die Animation zum Erweitern und Reduzieren der Seitenleiste

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um verschiedene Zentrierungsmethoden zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!