Vorwort Es gibt viele Möglichkeiten, in CSS horizontal und vertikal zu zentrieren. Die in diesem Artikel vorgestellten Methoden sind sehr umfassend und detailliert. Sie werden zu Ihrer Information und zum Lernen weitergegeben. Werfen wir einen Blick auf die ausführliche Einführung unten.
Wenn es beim Webdesign um die Zentrierung geht, ist es am wichtigsten, das Element mit seinem übergeordneten Element zu zentrieren. Es klingt einfach, aber haben Sie über die vielen Möglichkeiten nachgedacht? Einfach: Elemente mit bekannter Breite und Höhe Wenn Sie sowohl die Breite als auch die Höhe eines Elements kennen und das Element relativ zu seinem übergeordneten Element vertikal zentrieren möchten, kann die absolute Positionierung eine gute Methode sein, dies zu erreichen.
hauptsächlich{ Position: absolut; oben: calc(50 % – 3em); //Um 50 % der Höhe des übergeordneten Elements und die Hälfte seiner eigenen Höhe nach oben bewegen links: calc(50 % – 9em); //Um 50 % der Breite des übergeordneten Elements und die Hälfte seiner eigenen Breite nach links bewegen Breite: 18em; Höhe: 6em; } Erweitert: Elemente mit unbekannter Breite und Höhe Aber viele Elemente auf der Seite haben eine unbekannte Breite und Höhe.
Basierend auf der absoluten Positionierung erweitern. Wenn wir die Funktion translate() zum Berechnen von Prozentwerten verwenden, basieren die Konvertierung und Bewegung auf der Höhe und Breite des Elements selbst. Die Funktion translate() kann ein Element in eine angegebene Richtung verschieben, ähnlich der relativen Position. Oder einfacher ausgedrückt: Mit der Funktion „translate()“ können Sie ein Element von seiner ursprünglichen Position verschieben, ohne dass dies Auswirkungen auf Webkomponenten auf der X- oder Y-Achse hat. Daher müssen Sie die Größe des Elements im kompilierten Code nicht fest codieren, solange Sie prozentbasierte CSS-Transformationen zum Versetzen des Elements verwenden. hauptsächlich{ Position: absolut; oben: 50 %; links: 50%; transformieren: übersetzen( -50 %, -50 %); } Absolute Positionierung ist nicht geeignet Wenn wir keine absolute Positionierung verwenden möchten, können wir trotzdem translate() verwenden, um das Element um die Hälfte seiner Breite und Höhe zu verschieben. Sie können den Rand verwenden, um einen Bewegungseffekt zu erzielen. hauptsächlich{ Breite: 18em; Polsterung: 13 m 1,5 em; Rand: 50vh auto 0; //Der äußere Rand verwendet vh als Einheit, da der Prozentwert des Rands relativ zur Breite seines übergeordneten Elements interpretiert wird. Daher wird hier vh verwendet. transformieren: übersetzenY( -50%); } Tabellenbasiertes Layout Eine CSS-Tabelle könnte eine gute Wahl sein. Weil Tabellen nicht wie normale Elemente auf Blockebene gerendert werden. Wenn das Element beispielsweise 100 % breit ist, nimmt die Tabelle nur die Breite des eigentlichen Inhalts ein, während das Standardelement auf Blockebene automatisch 100 % des übergeordneten Elements einnimmt. <Tabellenstil="100%"> <tr> <td style="Textausrichtung: zentriert; vertikale Ausrichtung: zentriert"> Ich bin vertikal zentriert! </td> </tr> </Tabelle> Wenn Sie die Semantik der Seite berücksichtigen, können Sie dies tun .etwas-semantisches { Anzeige: Tabelle; Breite: 100 %; } .etwas-anderes-semantisch { Anzeige: Tabellenzelle; Textausrichtung: zentriert; vertikale Ausrichtung: Mitte; } Inline-Block Wir könnten sogar die Verwendung von Pseudoelementen in Betracht ziehen. Dann können wir den vertikalen Zentriereffekt erzielen. Dies ist eine relativ einfache Methode. .block { Textausrichtung: zentriert; Leerzeichen: Nowrap; } /* Erweitere die Höhe auf 100 % */ .block:vor { Inhalt: ''; Anzeige: Inline-Block; Höhe: 100%; vertikale Ausrichtung: Mitte; margin-right: -0.25em; /* Passt den Abstand an */ } /* Das vertikal zentrierte Element kann eine beliebige Breite und Höhe haben*/ .zentriert { Anzeige: Inline-Block; vertikale Ausrichtung: Mitte; Breite: 300px; } Eine Flexbox-basierte Lösung Mit Flexbox können wir normalerweise das Layout seiner untergeordneten Elemente besser bearbeiten, zum Beispiel:
Es ist zweifellos die beste Lösung. Denn Flexbox ist speziell für diese Art von Bedarf konzipiert 😄 Körper{ Anzeige: Flex; Mindesthöhe: 100vh; Rand: 0; } hauptsächlich{ Rand: automatisch; } Wenn der Text innerhalb des zentrierten Elements auch zentriert werden muss: hauptsächlich{ Anzeige: Flex; Elemente ausrichten: zentrieren; Inhalt ausrichten: zentriert; Breite: 18em; Höhe: 10em; } Zusammenfassen Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM. siehe:
|
<<: JavaScript-Komposition und Vererbung erklärt
>>: Implementierung von dynamischem REM für mobiles Layout
Vorwort In diesem Artikel wird erklärt, wie Vue-K...
Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...
Wenn href zum Übergeben von Parametern benötigt w...
Bereitstellen des Projekts in der Testumgebung de...
Inhaltsverzeichnis 1. Verwenden Sie RGB zur Darst...
Ich habe vor Kurzem ein Mac-System verwendet und ...
Inhaltsverzeichnis Auch die Verwendung der integr...
Ich verwende CSS schon seit langer Zeit, habe jed...
Bisher kannten wir mehrere Hintergrundattribute i...
Einführung Wenn wir die MySQL-Datenbank verwenden...
Vorwort Wenn Sie sich auf die Stelle eines Betrie...
<br />Ein toller Blogbeitrag von PPK vor zwe...
Inhaltsverzeichnis Vorwort: Schritt 1: Finden Sie...
1. Verwendung des CSS-Bereichs (Stilaufteilung) I...
Ich habe vor Kurzem ein Testserver-Betriebssystem...