Wie kann ich eine Schaltfläche innerhalb eines Div zentrieren?

Zentrieren einer Schaltfläche innerhalb eines Div

In der Webentwicklung ist es oft wünschenswert, eine Schaltfläche innerhalb eines enthaltenden Div zu zentrieren. Lassen Sie uns zwei Lösungen für diese Herausforderung erkunden:

Verwendung von Flexbox

Flexbox bietet eine elegante Lösung zum Ausrichten von Elementen entlang beider Achsen. So zentrieren Sie eine Schaltfläche horizontal und vertikal innerhalb eines Div:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Wenn nur eine horizontale Zentrierung gewünscht wird, kann die Eigenschaft „justify-content“ verwendet werden:

#wrapper {
  display: flex;
  justify-content: center;
}

Margin- Basierender Ansatz

Ohne Flexbox kann eine Schaltfläche mit zentriert werden Ränder:

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}

Nur ​​für die horizontale Zentrierung kann einer dieser beiden Ansätze verwendet werden:

• Rand: 0 automatisch; auf der Schaltfläche
• text-align: center; auf dem enthaltenden div

Das obige ist der detaillierte Inhalt vonWie kann ich eine Schaltfläche innerhalb eines Div zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!