|
You might want to try assigning the svg elements the CSS property "display: inline-block; " and see how that goes (instead of using floats). If you then wrap the two in a <div> with the "margin-left; auto; margin-right: auto; " trick, it ought to center the pair of images on the page. (You can put the 'display' property inline in the SVG element using the 'style' attribute, or if you want to do it with a CSS rule, since it's in a different namespace, try *|svg as the selector (or svg|svg, with a @namespace declaration as the top of your CSS file). To add space between the two images, just add a non-breaking space, or for other spacing alternatives you can try CSS properties such as word-spacing (the two SVG elements will be considered "words" for purposes of layout). Of course, since you seem to know exactly what the image sizes are, have you considered placing both images in a single SVG element and positioning them using x and y attributes?
|