Wie zentriere ich ein Element innerhalb eines übergeordneten Elements mithilfe von CSS?-CSS-Tutorial-php.cn

How Do I Center an Element Inside a Parent Using CSS?

Zentrieren eines Elements innerhalb eines enthaltenen
in CSS

Wenn Sie versuchen, ein HTML-Element innerhalb des gesamten Fensters mithilfe der CSS-Eigenschaft left: 50%; zu zentrieren, können Situationen auftreten, in denen das Element speziell innerhalb seines übergeordneten Elements

zentriert werden muss. Um dies zu erreichen, können wir eine Kombination von CSS-Eigenschaften nutzen.

Für das übergeordnete

wenden Sie das folgende CSS an:

text-align: center;

Nach dem Login kopieren

Dadurch wird der gesamte Inhalt darin horizontal zentriert das

Für das Kind

dass wir gezielt zentrieren wollen, verwenden wir:

margin: auto;

Nach dem Login kopieren

Setting margin: auto; Auf allen Seiten wird das untergeordnete Element automatisch zentriert.

innerhalb seines übergeordneten Elements. Alternativ können Sie den automatischen Rand auf bestimmten Seiten festlegen, um die horizontale oder vertikale Zentrierung je nach Bedarf zu steuern.

Zum Beispiel:

margin: auto auto auto 0; /* Centers horizontally with right margin */
margin: auto 0 auto auto; /* Centers horizontally with left margin */

Nach dem Login kopieren

Dieser Ansatz ermöglicht eine präzise Steuerung der Zentrierung eines spezifisches Element innerhalb eines

, während die Textausrichtung der anderen Elemente innerhalb des Containers beibehalten wird.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Element innerhalb eines übergeordneten Elements mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich einen radialen Farbverlauf in CSS animieren, um einen Glanzeffekt zu erzeugen? Nächster Artikel：Wie kann ich die Farbe der Bootstrap 4 Navbar-Umschalttaste ändern?

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 Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2165

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2313

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1950

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...