Wie erreichen CSS3-Eigenschaften eine horizontale und vertikale Zentrierung?

王林
Freigeben: 2023-09-09 09:58:46
Original
1455 Leute haben es durchsucht

Wie erreichen CSS3-Eigenschaften eine horizontale und vertikale Zentrierung?

Wie erreicht man mit CSS3-Eigenschaften eine horizontale und vertikale Zentrierung?

Mit der Entwicklung des Webdesigns wird es immer wichtiger, eine horizontale und vertikale Zentrierung von Elementen zu erreichen. In CSS3 können diese Layouteffekte mithilfe einiger Eigenschaften und Techniken leicht erreicht werden. In diesem Artikel werden einige häufig verwendete CSS3-Eigenschaften und Codebeispiele vorgestellt, die Ihnen dabei helfen, horizontale und vertikale Zentrierungseffekte zu erzielen.

1. Horizontale Zentrierung

1. Verwenden Sie das text-align-Attribut für die horizontale Zentrierung.
Verwenden Sie das text-align-Attribut im übergeordneten Element, um eine horizontale Zentrierung des untergeordneten Elements zu erreichen.
Codebeispiel:

.parent { text-align: center; } .child { display: inline-block; }
Nach dem Login kopieren

Untergeordnete Elemente, die display:inline-block verwenden, werden horizontal im übergeordneten Element zentriert.

2. Verwenden Sie Randattribute für die horizontale Zentrierung.
Erzielen Sie eine horizontale Zentrierung, indem Sie margin-left:auto und margin-right:auto für untergeordnete Elemente festlegen.
Codebeispiel:

.parent { text-align: center; } .child { margin-left: auto; margin-right: auto; display: block; }
Nach dem Login kopieren

Untergeordnete Elemente, die display:block verwenden, werden horizontal im übergeordneten Element zentriert.

3. Verwenden Sie Flexbox für die horizontale Zentrierung.
Mit dem Flexbox-Layout können Sie eine horizontale Zentrierung flexibler erreichen.
Codebeispiel:

.parent { display: flex; justify-content: center; } .child { /* 子元素样式 */ }
Nach dem Login kopieren

Sie können eine horizontale Zentrierung untergeordneter Elemente erreichen, indem Sie die Eigenschaften display:flex und justify-content:center des übergeordneten Elements festlegen.

2. Vertikale Zentrierung von Text.

Codebeispiel:

.parent { height: 100px; line-height: 100px; } .child { /* 子元素样式 */ }
Nach dem Login kopieren

Indem Sie das Attribut line-height auf den Höhenwert des übergeordneten Elements setzen, wird der Inhalt des untergeordneten Elements innerhalb des übergeordneten Elements vertikal zentriert.

2. Verwenden Sie das Tabellenattribut für die vertikale Zentrierung.

Indem Sie das übergeordnete Element auf display:table und das untergeordnete Element auf display:table-cell festlegen und dann Vertical-Align:Middle verwenden, um eine vertikale Zentrierung zu erreichen.

Codebeispiel:

.parent { display: table; } .child { display: table-cell; vertical-align: middle; }
Nach dem Login kopieren

Verwenden Sie display:table und display:table-cell, um ein untergeordnetes Element innerhalb eines übergeordneten Elements vertikal zu zentrieren.

3. Verwenden Sie das Transformationsattribut für die vertikale Zentrierung.

Erzielen Sie eine vertikale Zentrierung, indem Sie das übergeordnete Element auf position:relative und das untergeordnete Element auf position:absolute setzen und top:50% und transform:translateY(-50%) verwenden.

Codebeispiel:

.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
Nach dem Login kopieren

Verwenden Sie transform:translateY(-50%), um das untergeordnete Element innerhalb des übergeordneten Elements vertikal zu zentrieren.

Zusammenfassend lässt sich sagen, dass wir durch die Verwendung einiger CSS3-Eigenschaften und -Techniken problemlos eine horizontale und vertikale Zentrierung von Elementen erreichen können. Wählen Sie entsprechend den tatsächlichen Anforderungen die geeignete Methode aus, um den Layouteffekt zu erzielen. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonWie erreichen CSS3-Eigenschaften eine horizontale und vertikale Zentrierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!