Wie kann man eine SVG-Datei in CSS nach links zentrieren?
Hallo,
ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.
Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.
Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?
HTML:
<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>
CSS:
.Welt {
width: 75%;
height: 75%;
}
Danke schon einmal im Voraus. :)
1 Antwort
Der moderne Weg wäre mittels Flexbox.
Dazu das object (ich würde da ein img Element bevorzugen) und ein div für die rechte Spalte in ein Element (div) verpacken und diesem Element display: flex als Styling mitgeben.
Für die beiden Kindelemente dann mittels width Eigenschaft 75% bzw 25% als Breite einstellen.
<style>
#container { display: flex }
#left { width: 75%; }
#right { width: 25%; }
</style>
<div id="container">
<img id="left" src="...">
<div id="right">
Hier kommt mehr Inhalt hin...
</div>
</div>
Woher ich das weiß:Berufserfahrung – Studium + Berufspraxis
Okay habe ich hinzugefügt, vielen Dank schon mal dafür :) Jetzt ist die SVG Datei zwar links aber ich bekomme sie nicht mittig. Ich würde die Weltkugel gerne mittig links haben... Was muss ich da hinzufügen?