Wie zentriere ich eine SVG-Datei mithilfe von CSS in einem Div-Container?

SVGs innerhalb von Div-Containern mit CSS zentrieren

Beim Versuch, ein SVG innerhalb eines Divs zu zentrieren, kann es zu Schwierigkeiten kommen, wenn das Div und das SVG haben unterschiedliche Breiten, obwohl die Ränder auf „Auto“ eingestellt sind.

Verstehen des Problems:

SVGs werden standardmäßig als Inline-Elemente gerendert. Das bedeutet, dass sie sich wie Text verhalten, die Einstellung „margin: auto“ wirkt sich also nur auf den linken und rechten Rand aus. In Ihrem Fall bleibt der standardmäßige linke Rand von Null unberührt, was zu einem Versatz von der Mitte führt.

Lösungen:

1. Anzeige einstellen: Block:

Konvertieren Sie das SVG in ein Blockelement, indem Sie „display: block“ zu seinem CSS hinzufügen. Dadurch kann „margin: auto“ das SVG horizontal innerhalb des Div zentrieren.

Beispiel:

svg {
  display: block;
  margin: auto;
}

2. Text-Align verwenden: Center:

Behalten Sie das SVG als Inline-Element bei und legen Sie „text-align: center“ für das übergeordnete Div fest. Dadurch werden alle Inline-Elemente, einschließlich der SVG-Datei, an der Mitte des Div ausgerichtet.

Beispiel:

div {
  text-align: center;
}

svg {
  margin: 0 auto;
}

3. Flex- oder Rasterlayouts:

Alternativ können Sie Flex- oder Rasterlayouts verwenden, um das SVG innerhalb des übergeordneten Elements zu zentrieren:

Flexbox:

.container {
  display: flex;
  justify-content: center;
}

svg {
  margin: auto;
}

Raster:

.container {
  display: grid;
  justify-content: center;
}

svg {
  grid-column: 1;
}

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine SVG-Datei mithilfe von CSS in einem Div-Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!