Den Körper zentriert zu machen, ist eine der Hauptaufgaben beim Entwerfen einer Webseite. Dies ermöglicht Ihnen, ein ästhetisch ansprechendes und lesbares Design zu erstellen, das sich von anderen Websites vorteilhaft unterscheidet. Aber auf welche Weise kann die Körperzentrierung erreicht werden? In diesem Artikel werden wir einige Methoden durchgehen und Empfehlungen geben, die Ihnen helfen, ein attraktives und professionelles Webdesign zu erstellen.
Body-Zentrierungsmethoden:
1. Zentrieren mit CSS: Eine der beliebtesten Möglichkeiten, den body zu zentrieren, ist die Verwendung von CSS. Dazu können Sie die Eigenschaft margin und auto verwenden. Sie müssen den Wert margin: 0 auto in den CSS-Stilen für body festlegen, um die Einrückung links und rechts automatisch zu berechnen und innerhalb des Containers zu zentrieren. Diese Methode eignet sich für die meisten modernen Browser und ist einfach und effektiv.
2. Flexbox verwenden: Eine andere Möglichkeit, den body zu zentrieren, ist die Verwendung einer Flexbox. Flexbox ist ein neues CSS3-Modul, mit dem Sie ein flexibles und anpassungsfähiges Design erstellen können. Um den body mit flexbox zu zentrieren, müssen Sie die display: flex-Eigenschaft für den body-Container und die justify-content: center-Eigenschaft festlegen, um den Inhalt zentriert auszurichten.
Empfehlungen zur Zentrierung des body:
1. Verwenden Sie relative Einheiten: Wenn Sie Bemaßungen und Einrückungen für Elemente festlegen, müssen Sie relative Einheiten wie Prozentsätze oder em verwenden. Dies wird dazu beitragen, ein gummiartiges und anpassungsfähiges Design zu erstellen, das auf verschiedenen Geräten und Bildschirmen gut aussieht.
2. Überprüfen Sie die Leistung auf verschiedenen Geräten: Nachdem Sie den body zentriert haben, müssen Sie überprüfen, wie er auf verschiedenen Geräten und Bildschirmen aussieht. Dies wird dazu beitragen, sicherzustellen, dass das Design auf verschiedenen Plattformen qualitativ hochwertig und ästhetisch ansprechend bleibt.
Zentrieren des body auf einer Seite: Die wichtigsten Möglichkeiten
Eine der einfachsten Möglichkeiten zum Zentrieren besteht darin, den CSS-Stil von margin: 0 auto zu verwenden; . Mit diesem Stil können Sie die automatischen Einrückungen oben und unten festlegen und das Tag automatisch horizontal zentrieren. Im Folgenden finden Sie ein Beispiel für die Verwendung dieses Stils:
body Привет, мир!
Пример центрирования body с использованием CSS.
Eine andere Möglichkeit, ein Tag auf einer Seite zu zentrieren, besteht darin, eine Tabelle mit einer einzelnen Zelle zu verwenden. In diesem Fall wird eine Tabelle mit einer Zeile und einer Zelle erstellt, in die der Inhalt der Seite eingefügt wird. Im Folgenden finden Sie ein Beispiel für die Verwendung einer Tabelle zum Zentrieren eines Tags :
table td Привет, мир!
Пример центрирования body с использованием таблицы.
Mit einer dieser Methoden können Sie den Inhalt eines Tags einfach und effizient auf einer Webseite zentrieren.
Verwenden der CSS-Eigenschaft margin
Sie können den folgenden Code verwenden, um den Hauptinhalt der Seite zentriert auszurichten:
margin: 0 auto;
In diesem Code wird der Einzug am oberen und unteren Rand der Seite auf 0 gesetzt und der horizontale Einzug automatisch eingestellt. Als Ergebnis werden alle Elemente innerhalb des Body-Tags in der Mitte der Seite ausgerichtet.
Sie können auch einzelne Elemente zentriert ausrichten, indem Sie sie einrücken. Wenn Sie beispielsweise Text zentriert ausrichten möchten, können Sie den folgenden Code verwenden:
text-align: center;
Dieser Code wendet die zentrierte Ausrichtung auf alle Absätze auf der Seite an.
Sie können auch Einzüge für einzelne Seiten eines Elements festlegen. Wenn Sie beispielsweise den Einzug nur auf der rechten Seite festlegen möchten, können Sie den folgenden Code verwenden:
margin-right: 20px;
Dieser Code legt den Einzug für alle Elemente mit dem div-Tag auf der Seite auf der rechten Seite fest.
Mit der CSS-Eigenschaft margin können Sie die Ausrichtung von Elementen auf der Seite flexibel steuern und das gewünschte Ergebnis erzielen.
Positionieren mit der CSS-Eigenschaft position
Es gibt vier Hauptwerte für die Position-Eigenschaft:
| Bedeutung | Die Beschreibung |
|---|---|
| static | Dies ist der Standardwert. Das Element befindet sich im Dokumentfluss und unterliegt keiner anderen Positionierung. Die Positionierung mit den Eigenschaften top, right, bottom, left hat keine Auswirkung auf ein Element mit einem static-Wert. |
| relative | Das Element wird relativ zu seiner normalen Position im Dokumentfluss positioniert. Andere Elemente auf der Seite werden nicht verschoben, wenn dieser Wert verwendet wird, und der Platz, den das Element im Stream belegt hat, bleibt leer. |
| fixed | Das Element wird relativ zum Browserfenster positioniert. Selbst wenn Sie eine Seite scrollen, bleibt sie an einer festen Position. |
| absolute | Das Element wird relativ zu seinem am nächsten positionierten übergeordneten Element positioniert. Wenn das Element keine übergeordneten Elemente mit Positionierung hat, erfolgt die Positionierung relativ zum Browserfenster. |
Um eine bestimmte Position eines Elements auf einer Seite mithilfe der Eigenschaften top, right, bottom, left zu bestimmen, müssen Sie andere Werte als static verwenden. Sie können beispielsweise den folgenden Code verwenden, um ein Element in der Mitte der Seite zu positionieren:
.element
Mit dieser Eigenschaft können Sie die Position eines Elements relativ zum übergeordneten Element oder Browserfenster festlegen und ist eines der wichtigsten Werkzeuge zum Erstellen moderner und flexibler Webseiten-Layouts.
Arbeiten mit Flexbox
Die flex-direction-Eigenschaft definiert die Richtung des flexiblen Layouts. Der row-Wert legt die horizontale Anordnung der Elemente fest, während der column-Wert die vertikale Anordnung der Elemente festlegt.
Die Eigenschaft justify-content definiert die Ausrichtung von Elementen entlang der Hauptachse des Containers. Es gibt verschiedene Werte für diese Eigenschaft, z. B. flex-start, flex-end, center, space-between und space-around, mit denen Sie verschiedene Ausrichtungskombinationen erzielen können.
Die align-items-Eigenschaft definiert die Ausrichtung von Elementen entlang der Querachse des Containers. Ähnlich wie bei der Eigenschaft justify-content hat sie die Werte flex-start, flex-end, center, baseline und stretch, die die vertikale Anordnung der Elemente steuern.
Außerdem können Sie mit Flexbox ein flexibles Elementraster mit der Flex-Wrap-Eigenschaft erstellen, die bestimmt, ob Elemente in neue Zeilen verschoben werden sollen, wenn nicht genügend Platz vorhanden ist. Es gibt auch zusätzliche Eigenschaften wie order, die die Anzeigereihenfolge von Elementen definiert, und flex-grow, flex-shrink und flex-basis, die die Verteilung des verfügbaren Platzes zwischen den Elementen steuern.
Mit flexbox können Sie die Anordnung von Elementen auf einer Seite mit ein paar einfachen Eigenschaften steuern und den Umbruchprozess erheblich vereinfachen. Beachten Sie jedoch, dass die Unterstützung für Flexbox in einigen älteren Browsern möglicherweise eingeschränkt ist. Daher wird empfohlen, die Kompatibilität mit verschiedenen Versionen zu überprüfen, bevor Sie diese Technik verwenden.
Empfehlungen zum Zentrieren des body
Wenn Sie den body auf einer Seite zentrieren, können Sie verschiedene Methoden verwenden, abhängig von dem gewünschten Effekt und den Implementierungsbedingungen. Im Folgenden finden Sie einige Empfehlungen:
- Verwenden Sie die CSS Eigenschaft margin: 0 auto;, um den body zu zentrieren. Dadurch können Sie die Einzüge automatisch horizontal einstellen und den Block mittig ausrichten.
- Stellen Sie sicher, dass der body keine zusätzlichen Einrückungen oder äußeren Ränder enthält, die einen Inhaltsversatz verursachen können.
- Wenn Sie den body vertikal auf der Seite zentrieren möchten, können Sie die CSS-Kombination der Eigenschaften display: flex; und align-items: center; verwenden. Dadurch können Sie den Inhalt des body vertikal ausrichten.
- Wenn Sie ältere Browser unterstützen möchten, können Sie einen Positionierungsansatz verwenden. Setzen Sie den body als Element mit absoluter Positionierung und verwenden Sie dann die Eigenschaften top: 50%; und left: 50%; zentrieren Sie ihn relativ zum übergeordneten Container.
Vergessen Sie nicht, die Zentrierung des body auf verschiedenen Geräten und Bildschirmauflösungen zu überprüfen. Möglicherweise ist eine zusätzliche Einstellung für die adaptive Zentrierung erforderlich.
Festlegen einer festen Breite für einen Body-Container
Sie können Stile verwenden, um eine feste Breite für den Body-Container in HTML festzulegen. Fügen Sie dazu dem Abschnitt oder der CSS-Datei den folgenden Code hinzu:
bodyIn diesem Beispiel ist die Breite des body-Containers auf 800 Pixel festgelegt, Sie können diesen Wert jedoch an Ihre Bedürfnisse anpassen. Margin-Eigenschaft: 0 auto; Wird verwendet, um den Container horizontal zu zentrieren.
Nachdem Sie eine feste Breite für den Body-Container festgelegt haben, werden alle Seitenelemente in diesem Container mit der angegebenen Breite angezeigt. Dies kann nützlich sein, wenn Sie eine Seite mit fester Inhaltsbreite erstellen möchten oder wenn Sie die Anordnung der Elemente auf der Seite steuern müssen.
Das Festlegen einer festen Breite für den Body-Container kann bei der Entwicklung adaptiver Websites oder beim Erstellen von Layouts mit festen Abmessungen nützlich sein. Beachten Sie jedoch, dass eine feste Breite zu Anzeigeproblemen auf Geräten mit geringerer Auflösung oder beim Ändern der Größe des Browserfensters führen kann.
Anwenden von Medienabfragen
Um Medienabfragen zu verwenden, müssen Sie eine Bedingung angeben, unter der sich die Stile ändern müssen. Um beispielsweise den body für mobile Geräte zentriert zu machen, können Sie den folgenden Code verwenden:
@media (max-width: 480px) >
In diesem Beispiel weisen wir darauf hin, dass der Stil nur auf Geräte mit einer maximalen Bildschirmbreite von 480 Pixeln angewendet werden sollte. Innerhalb einer Medienabfrage ändern wir die text-align-Eigenschaft des body-Elements in den Wert center, um den Inhalt zentriert auszurichten.
Darüber hinaus können Medienabfragen verwendet werden, um andere Stile und Eigenschaften wie Schriftgröße, Hintergrundfarbe, Elementanordnung und vieles mehr zu ändern. Sie können unterschiedliche Bedingungen und Stile für verschiedene Gerätebereiche definieren, um die bestmögliche Benutzererfahrung zu gewährleisten.
Durch die Verwendung von Medienabfragen kann Ihre Webseite ansprechend und benutzerfreundlich gestaltet werden, unabhängig davon, auf welchem Gerät sie sie öffnen. Damit können Sie die Stile und das Aussehen Ihrer Seite einfach verwalten, sodass sie auf jedem Gerät am besten aussieht.
