How to center/fit page width SVG images with <OBJECT>

[amoroso]

Based on discussion in another thread, I use the following CSS and XHTML for simple horizontally centered images with a caption:

div.figure { text-align: center; font-style: italic; font-size: 80%; margin: 1em 0; page-break-inside: avoid; }
div.figure img { page-break-after: avoid; }
div.figure p { text-align: center; text-indent: 0; margin-top: 1em; page-break-before: avoid; }
...
<div class="figure">
<img src="../Images/my-image.jpg" />
<p>Caption</p>
</div>

To insert an SVG image I instead use code like this:

<div class="figure">
<object type="image/svg+xml" data="../Images/my-image.svg">
<img alt="Fallback" src="../Images/my-image.jpg" />
</object>
<p>Caption</p>
</div>

How can I make sure that the SVG image is horizontally centered? Is it enough to put it inside <DIV>? Also, how can I make it fit all the page width?