Wie zentriere ich ein untergeordnetes Element innerhalb seines übergeordneten Elements?

Zentrieren eines Elements innerhalb eines

Element

Bei Verwendung der CSS-Eigenschaft left: 50 % wird das Element in Bezug auf das gesamte Ansichtsfenster zentriert, nicht in Bezug auf das unmittelbare übergeordnete Element. Um ein untergeordnetes Element innerhalb seines übergeordneten Elements zu zentrieren, verwenden Sie eine Kombination aus text-align und margin.

Setzen Sie die text-align-Eigenschaft des übergeordneten Elements auf „center“, um seinen Inhalt horizontal zu zentrieren. Dann wenden Sie margin: auto; zum untergeordneten Element. Dadurch werden die Ränder auf allen Seiten automatisch angepasst und sichergestellt, dass das Element innerhalb des übergeordneten Elements zentriert ist.

Beispiel:

#parent {
    text-align: center;
}

.child {
    margin: auto;
}

In diesem Beispiel das #parent div wird horizontal im Ansichtsfenster zentriert, und das .child-div wird horizontal innerhalb des #parent zentriert div.

Zusätzliche Hinweise:

• Rand verwenden: auto; zentriert das Element nur horizontal. Wenn Sie es sowohl horizontal als auch vertikal zentrieren möchten, müssen Sie margin: auto auto; festlegen.
• Wenn das untergeordnete Element breiter als das übergeordnete Element ist, reicht es über die Grenzen des übergeordneten Elements hinaus. In diesem Fall ist es am besten, die Eigenschaft width des untergeordneten Elements auf einen kleineren Wert zu setzen, der in den Wert des übergeordneten Elements passt.

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

css if auto using Property this margin viewport

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