So richten Sie CSS zentriert aus

In CSS ist die zentrierte Ausrichtung ein häufiges Problem. Es gibt viele Möglichkeiten, eine zentrierte Ausrichtung zu erreichen, und in diesem Artikel werden einige davon vorgestellt.

1. Text zentriert ausrichten

Um Text horizontal auszurichten, können Sie die folgende Methode verwenden:

text-align: center;

Das wird machen Das Element Der gesamte darin enthaltene Text ist horizontal zentriert, jedoch nicht vertikal.

Um Text vertikal auszurichten, können Sie die folgende Methode verwenden:

display: flex;
align-items: center;
justify-content: center;

Dabei wird Flexbox verwendet, um alles im Element vertikal und horizontal zentriert auszurichten.

2. Mittige Ausrichtung von Elementen auf Blockebene

Angenommen, wir möchten ein div-Element horizontal und vertikal zentrieren. Hier erfahren Sie, wie Sie dies erreichen : #🎜🎜 #

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Dadurch wird das Element zentriert ausgerichtet, indem seine obere linke Ecke am Mittelpunkt des übergeordneten Elements positioniert wird. Das Attribut

wird verwendet, um das Element um 50 % nach oben und nach links zu verschieben, um den Mittelpunkt des Elements am Mittelpunkt des übergeordneten Elements auszurichten. transform

Richten Sie das Bild in der Mitte aus

Um das Bild horizontal auszurichten, verwenden Sie die folgende Methode:

display: block;
margin: auto;

This Dadurch wird das Bild in der Mitte horizontal ausgerichtet. Um das Bild vertikal auszurichten, können Sie die folgende Methode verwenden:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Tabelle zentriert ausrichten

Um die Tabelle horizontal auszurichten, können Sie verwenden die folgende Methode:# 🎜🎜#

margin: 0 auto;

Dadurch wird die Tabelle zentriert und horizontal ausgerichtet. Um den Tisch vertikal auszurichten, können Sie die folgende Methode verwenden:

display: flex;
align-items: center;
justify-content: center;

Dadurch wird Flexbox verwendet, um den Tisch vertikal und horizontal zentriert auszurichten.

Untergeordnete Elemente zentriert ausrichten

5. Um untergeordnete Elemente zentriert auszurichten, können Sie die folgende Methode verwenden:

display: flex;
align-items: center;
justify-content: center;

Diese Flexbox wird verwendet, um alle untergeordneten Elemente vertikal und horizontal zentriert auszurichten.

In diesem Artikel haben wir einige Methoden der zentrierten Ausrichtung vorgestellt, darunter Text, Bilder, Elemente auf Blockebene, Tabellen usw. Bei der Auswahl des zu verwendenden Zeitraums müssen Sie je nach Situation die am besten geeignete Methode auswählen.

Das obige ist der detaillierte Inhalt vonSo richten Sie CSS zentriert aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!