Design und Layout einer Webseite sie sind einige der wichtigsten Aspekte, um attraktive und funktionale Websites zu erstellen. Das Zentrieren von Inhalten ist zu einem beliebten Trend im Webdesign geworden, und viele Webentwickler sind bestrebt, Seiten zu erstellen, bei denen alle Elemente horizontal und vertikal zentriert ausgerichtet sind. Dabei wird besonders auf die Tag-Zentrierung geachtet body das ist der Hauptcontainer für den gesamten Inhalt der Seite.
Tag zentrieren body die Seite kann auf verschiedene Arten erreicht werden, von denen jede ihre eigenen Vor- und Nachteile hat. In diesem Artikel werden wir uns einige beliebte Methoden zum Zentrieren eines Tags ansehen body und wir werden Empfehlungen für ihre Verwendung geben.
Eine der einfachsten und gebräuchlichsten Möglichkeiten, ein Tag zu zentrieren body - verwendung von CSS-Eigenschaften margin: auto;. Wenn Sie diese Eigenschaft auf anwenden body, dann wird der Inhalt auf der Seite automatisch horizontal und vertikal zentriert ausgerichtet. Dies ist praktisch, wenn Sie schnell und einfach eine zentrierte Webseite erstellen müssen, ohne komplizierte Techniken und Code zu verwenden.
Möglichkeiten zum Zentrieren des body auf einer Seite
Es gibt mehrere Möglichkeiten, den Hauptinhalt einer Website, die sich in einem Tag befindet, zu zentrieren . Hier sind einige von ihnen:
1. Flexbox verwenden: eine der einfachsten und beliebtesten Möglichkeiten zum Zentrieren ist die Verwendung von Flexbox-Eigenschaften. Es genügt, die Eigenschaft festzulegen display: flex; für und legen Sie die horizontale und vertikale Zentrierung mit der Eigenschaft fest justify-content: center; und align-items: center;.
2. Positionierung verwenden: sie können absolute Positionierung auf den Hauptinhalt anwenden, indem Sie die Eigenschaften festlegen position: absolute; und top: 50%; und versetzen Sie es dann mit den Eigenschaften um die Hälfte der Höhe und Breite translateY(-50%); und translateX(-50%);.
3. Verwenden einer Tabelle: Sie können eine Tabelle mit einer einzelnen Zelle erstellen und ihren Inhalt mithilfe der Eigenschaft zentrieren text-align: center;. Anschließend können Sie die Breite und Höhe der Tabelle auf 100% festlegen, um den gesamten Bildschirm zu füllen.
4. Verwenden von Grids: Sie können ein Raster mit einer einzelnen Zelle erstellen und die Eigenschaft für den Inhalt festlegen place-items: center;. Sie können dann die Breite und Höhe des Gitters auf 100% festlegen, um den gesamten Bildschirm zu füllen.
Die Auswahl der Zentrierungsmethode hängt von den Besonderheiten des Projekts und den persönlichen Vorlieben des Entwicklers ab. Es ist wichtig sich daran zu erinnern, dass die Zentrierung auf die einzelnen Elemente angewendet werden muss, nicht auf die darin enthaltenen Elemente, um sicherzustellen, dass sich der gesamte Inhalt in der Mitte der Seite befindet.
Verwenden der CSS-Eigenschaft margin: 0 auto;
Sie können die CSS-Eigenschaft margin mit 0 auto- Werten verwenden, um ein Element auf der Seite zu zentrieren. Mit dieser Eigenschaft können Sie automatisch eine gleiche Menge an freiem Speicherplatz auf beiden Seiten eines Elements zuweisen, wodurch es horizontal zentriert wird.
Wenn Sie diese Eigenschaft auf das body-Element anwenden, können Sie die gesamte Seite auf dem Bildschirm des Benutzers zentrieren. Um dies zu erreichen, müssen Sie den folgenden CSS-Code angeben:
| body | > |
| margin: 0; | |
| auto; |
In diesem Code wird die Margin-Eigenschaft auf 0 festgelegt, was bedeutet, dass keine äußeren Einrückungen für das body-Element vorhanden sind. Legen Sie dann den horizontalen Einzug auf auto fest, wodurch das Element auf der Seite zentriert wird.
Es wird auch empfohlen, die CSS-Eigenschaft text-align: center; zu verwenden, um den Inhalt des body-Elements horizontal zu zentrieren. Mit dieser Eigenschaft können Sie Text und andere eingebettete Elemente innerhalb des body-Elements automatisch zentrieren.
Verwenden der CSS-Eigenschaft von flexbox
Um Flexbox zum Zentrieren von Elementen zu verwenden, müssen wir einen Container erstellen, in dem sich die zu zentrierenden Elemente befinden. Wir können dies mit einem Tag oder einem anderen Blockelement tun. Dann müssen wir die folgenden CSS-Eigenschaften auf den Container anwenden:
Eigenschaft display: flex; gibt an, dass der Container flexbox verwendet, um die Position der Elemente zu steuern. Eigenschaft justify-content: center; zentriert die Elemente horizontal und die Eigenschaft align-items: center; - vertikal.
Die Verwendung von Flexbox ermöglicht es uns, Elemente auf einer Seite einfach und flexibel zu zentrieren. Außerdem ermöglicht flexbox die Verwaltung der Reihenfolge und des Einrückens von Elementen und kann mit anderen CSS-Eigenschaften kombiniert werden, um komplexe Komponenten und Layouts zu erstellen.
Verwenden der CSS-Eigenschaft text-align: center;
Um diese Eigenschaft anzuwenden, fügen Sie der CSS-Datei die folgende Regel hinzu:
bodyDer gesamte Body-Inhalt wird nun auf der Seite zentriert, einschließlich Text, Bilder und anderer Elemente.
Es sollte jedoch beachtet werden, dass diese Eigenschaft nur für Blockelemente funktioniert, die eine bestimmte Breite haben. Wenn Sie den gesamten Block auf einer Seite zentrieren möchten, sollten Sie ihn auf eine feste Breite festlegen und margin anwenden: 0 auto;:
.containerIn diesem Beispiel wird der gesamte Inhaltsblock mit der container-Klasse horizontal auf der Seite zentriert, da die Eigenschaft margin: 0 auto; legt automatisch die gleichen Einrückungen links und rechts fest.
Denken Sie daran, dass die Eigenschaft text-align: center; nur für den Inhalt des body selbst gilt, dh für seine untergeordneten Elemente. Wenn Sie andere Blöcke auf der Seite zentrieren möchten, wenden Sie diese Eigenschaft auf die entsprechenden Elemente an.
Verwenden von CSS-Frameworks zum Zentrieren
Eines der beliebtesten CSS-Frameworks ist Bootstrap. Es stellt viele Klassen zur Verfügung, um die Platzierung von Elementen auf einer Seite zu steuern. Die Klasse "d-flex" und ihre Modifikatoren können verwendet werden, um den body in Bootstrap zu zentrieren.
Ein weiteres beliebtes Framework ist Foundation. Es verfügt auch über verschiedene Klassen zum Zentrieren von Elementen. Beispielsweise zentriert die Flex-container-Klasse mit dem Wert "justify-center align-center" Elemente horizontal und vertikal.
Skeleton ist ein weiteres CSS-Framework, hat ein einfaches Raster mit Klassen, die zum Zentrieren verwendet werden können. Beispielsweise zentriert die Container-Klasse die Elemente automatisch horizontal.
- Bootstrap ist ein beliebtes CSS-Framework mit vielen Klassen zum Zentrieren von Elementen auf einer Seite.
- Foundation ist ein weiteres beliebtes Framework mit Klassen zum Zentrieren von Elementen horizontal und vertikal.
- Skeleton ist ein Framework mit einem einfachen Raster, das Klassen enthält, um Elemente horizontal zu zentrieren.
Auswählen der besten Methode zum Zentrieren des body auf der Seite: Empfehlungen
Beim Erstellen einer Webseite ist es wichtig sicherzustellen, dass sie auf dem Bildschirm zentriert ist, um eine angenehme visuelle Wahrnehmung und eine bessere Lesbarkeit des Inhalts zu gewährleisten. Es gibt verschiedene Möglichkeiten, den body auf einer Seite zu zentrieren, und die Auswahl der besten Methode hängt von den Besonderheiten Ihres Projekts und seinen Anforderungen ab.
Eine der einfachsten und gebräuchlichsten Methoden besteht darin, CSS-Eigenschaften zum Zentrieren zu verwenden. Zum Beispiel können Sie den Margin-Wert auf 0 auto setzen; für body in einer CSS-Datei. Dadurch wird der body horizontal auf der Seite zentriert. Diese Methode funktioniert jedoch möglicherweise nicht, wenn auf der Seite Elemente mit fester Breite oder Positionierung vorhanden sind.
Wenn Sie den body vertikal und horizontal zentrieren müssen, können Sie die Technik der absoluten Positionierung und der festen Einrückung verwenden. Fügen Sie dazu einen Wrapper-Container innerhalb des body hinzu und wenden Sie die folgenden Stile an:
.container .content Auf diese Weise können Sie den body relativ zum gesamten Browserfenster zentrieren. Mit der Eigenschaft transform: translate(-50%, -50%) wird der Container mit Inhalt um die Hälfte seiner Breite und Höhe nach links und nach oben verschoben.
Wenn Sie nur den body-Hintergrund zentrieren und den Inhalt links ausgerichtet lassen möchten, können Sie das Hintergrundbild und die Eigenschaft background-position: center center verwenden. Zum Beispiel:
body Diese Methode ist nützlich, wenn Sie ein Hintergrundbild haben, das auf der Seite zentriert sein muss.
Wählen Sie je nach Ihren Anforderungen und Projekteigenschaften die am besten geeignete Methode aus, um den body auf der Seite zu zentrieren. Stellen Sie sicher, dass Sie die Ergebnisse in verschiedenen Browsern und auf verschiedenen Geräten testen und überprüfen, um sicherzustellen, dass Ihre Zentrierung korrekt funktioniert und auf allen Plattformen gut aussieht.
