Mam plik SVG, który próbuję wyśrodkować w div. Div ma szerokość lub 900 pikseli. SVG ma szerokość 400 pikseli. SVG ma lewy margines i prawy margines ustawiony na auto. Nie działa, działa tak, jakby lewy margines wynosił 0 (domyślnie).
Czy ktoś zna mój błąd?
Powyższe odpowiedzi nie działały dla mnie. Dodanie atrybutu
preserveAspectRatio="xMidYMin"
do<svg>
tagu załatwiło sprawę. AbyviewBox
to działało, należy również określić atrybut. Źródło: sieć programistów Mozillaźródło
.container { display: flex; justify-content: center; }
I dodaj klasę .container do div, który zawiera twój plik svg.Po przeczytaniu powyżej, że plik svg jest domyślnie wbudowany, dodałem właśnie do div:
i to załatwiło sprawę.
Purystom może się to nie podobać (jest to obraz, a nie tekst), ale moim zdaniem HTML i CSS zepsuły się nad centrowaniem, więc myślę, że jest to uzasadnione.
źródło
Żadna z tych odpowiedzi nie działała dla mnie. Tak to zrobiłem.
źródło
left: 100%
Odpowiedzi powyżej wyglądają na niekompletne, ponieważ rozmawiają tylko z punktu widzenia css.
na położenie svg w rzutni mają wpływ dwa atrybuty svg
Kliknij ten link z codepen, aby uzyskać szczegółowy opis
źródło
Musiałem użyć
źródło
upewnij się, że twój css czyta:
Nawet jeśli mówisz, że lewy i prawy jest ustawiony na auto, być może umieszczasz błąd. Oczywiście nie wiedzielibyśmy, ponieważ nie pokazałeś nam żadnego kodu.
źródło
Możesz także to zrobić:
źródło
Umieść kod między tym,
div
jeśli używasz bootstrap :źródło
Flexbox to inne podejście: dodaj
.container { display: flex; justify-content: center; }
I dodaj.container
klasę do div, który zawiera twój svg.źródło
Dla mnie poprawką było dodanie
margin: 0 auto;
do elementu zawierającego<svg>
.Lubię to:
źródło