Wie zentriere ich eine Schaltfläche horizontal (und vertikal) innerhalb eines Divs voller Breite?

Zentrieren einer Schaltfläche innerhalb eines Divs mit 100 % Breite

Eine häufige Notwendigkeit in CSS besteht darin, eine Schaltfläche innerhalb eines Divs zu zentrieren, das sich über das Ganze erstreckt Breite der Seite. Um dies zu erreichen, stehen mehrere Methoden zur Verfügung.

Ein Ansatz ist die Verwendung von Flexbox. Durch Festlegen der Anzeigeeigenschaft des Divs auf Flex und Hinzufügen von justify-content: center und align-items: center wird das Div zu einem Flexbox-Container, der seine untergeordneten Elemente vertikal und horizontal zentriert.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

Bei vertikaler Ausrichtung ist nicht notwendig, Sie können einfach justify-content: center verwenden.

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

Für einen traditionelleren Ansatz können Sie die Margin-Eigenschaft der Schaltfläche auf „Auto“ setzen. Dadurch wird die Schaltfläche horizontal innerhalb des Div zentriert.

button {
  margin: 0 auto;
  /* Other styles */
}

Alternativ können Sie die text-align-Eigenschaft des Div auf „zentriert“ setzen. Dadurch werden alle Elemente innerhalb des Div zentriert, einschließlich der Schaltfläche.

div {
  text-align: center;
}
button {
  /* Other styles */
}

Dies sind nur einige Methoden zum Zentrieren einer Schaltfläche innerhalb eines Div. Der beste Ansatz hängt von den spezifischen Anforderungen Ihres Layouts ab.

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine Schaltfläche horizontal (und vertikal) innerhalb eines Divs voller Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!