suchen

Heim >Web-Frontend >CSS-Tutorial >Wie zentriere ich ein Element innerhalb seines übergeordneten Div mithilfe von CSS?

Wie zentriere ich ein Element innerhalb seines übergeordneten Div mithilfe von CSS?

Susan Sarandon
Susan SarandonOriginal
2024-11-25 03:06:12932Durchsuche

How to Center an Element Within Its Parent Div Using CSS?

Zentrieren eines Elements innerhalb eines übergeordneten Elements

Beim Zentrieren eines HTML-Elements mit links: 50 %; wird das Element ausgerichtet mit dem gesamten Browserfenster. Um ein Element jedoch speziell innerhalb seines übergeordneten Elements zu zentrieren, wird

Element ist ein anderer Ansatz erforderlich.

Um dies zu erreichen, weisen Sie text-align:center; zu. zum übergeordneten

. Dadurch wird der gesamte Inhalt innerhalb des
zentriert, einschließlich des untergeordneten Elements.

Als nächstes fügen Sie margin:auto; hinzu. zum untergeordneten Element. Dadurch wird sichergestellt, dass das untergeordnete Element automatisch innerhalb des übergeordneten

angepasst wird, unabhängig von seiner Breite oder Höhe.

Hier ist eine Demonstration mit CSS:

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}

Beachten Sie, dass margin:auto ; zentriert das untergeordnete Element sowohl horizontal als auch vertikal innerhalb des übergeordneten

.

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

css html auto using this margin
Stellungnahme：
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
Vorheriger Artikel：Ist das „type“-Attribut des „Tags“ wirklich notwendig?Nächster Artikel：Ist das „type“-Attribut des „Tags“ wirklich notwendig?

In Verbindung stehende Artikel

Mehr sehen