Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum funktioniert mein SVG-Center nicht in einem Div mit „margin: auto'?

Barbara Streisand
Freigeben: 2024-11-01 02:08:28
Original
716 Leute haben es durchsucht

Why Won't My SVG Center in a Div Using `margin: auto`?

So zentrieren Sie eine skalierbare Vektorgrafik (SVG) innerhalb eines Div

Bei Ihrer Suche, eine SVG innerhalb eines Div zu zentrieren, sind Sie auf Folgendes gestoßen Ein interessantes Problem, bei dem die Einstellung des linken und rechten Rands auf „Automatisch“ keine Auswirkung hatte. Um das Rätsel zu lösen, werfen wir einen Blick auf die zugrunde liegende Mechanik.

Standardmäßig gelten SVGs als Inline-Elemente, was bedeutet, dass sie sich bei der Positionierung wie Text verhalten. Das direkte Anwenden von Rändern auf Inline-Elemente ist in der Regel wirkungslos. Um hier Abhilfe zu schaffen, haben Sie mehrere Möglichkeiten:

1. Blockanzeige erzwingen:

Fügen Sie die CSS-Eigenschaft display: block zum SVG hinzu. Dadurch wird es in ein Element auf Blockebene umgewandelt, sodass es die gesamte Breite seines übergeordneten Divs einnehmen kann. Bei dieser Einstellung wird die SVG-Datei durch die Einstellung „marge: auto“ tatsächlich horizontal zentriert.

2. Nutzen Sie die Textausrichtung:

Abhängig von Ihrem Layout können Sie sich dafür entscheiden, die SVG-Datei inline zu belassen und stattdessen text-align:center auf dem übergeordneten Element festzulegen. Dadurch werden alle Inline-Inhalte, einschließlich der SVG-Datei, innerhalb der Breite des übergeordneten Elements ausgerichtet.

3. Flex- oder Rasterlayouts:

Erwägen Sie die Verwendung flexibler oder Rasterlayouts für das übergeordnete Element. Diese modernen Layouttechniken bieten eine bessere Kontrolle über die Elementpositionierung und können zum Zentrieren der SVG-Datei mithilfe von Techniken wie „justify-content: center“ oder „grid-template-columns: auto auto auto“ verwendet werden.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein SVG-Center nicht in einem Div mit „margin: auto'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage