Wie zentriere ich ein Div mit einer minimalen Breite mithilfe von CSS horizontal?

Horizontale Zentrierung eines <div> mit minimaler Breite unter Verwendung von CSS

Einkapseln eines <div> Element innerhalb eines anderen <div> ermöglicht eine präzise horizontale Zentrierung. Das äußere <div> bestimmt die Breitenbeschränkungen, während das innere <div> enthält den gewünschten Inhalt.

Für ein <div> Mit variabler Breite kann das folgende CSS eine horizontale Zentrierung unter Beibehaltung einer Mindestbreite erreichen:

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}

<div>

Das äußere <div> mit id="wrapper" legt eine Hintergrundfarbe für die Visualisierung fest und zentriert den darin enthaltenen Text mithilfe von text-align: center. Das innere <div> mit id="yourdiv" wird der Übersichtlichkeit halber eine Hintergrundfarbe zugewiesen. Es nutzt display: inline-block, um als Inline-Element zu rendern und gleichzeitig die Möglichkeit zu behalten, seine Breite anzupassen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Div mit einer minimalen Breite mithilfe von CSS horizontal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!