Quote:
Originally Posted by RbnJrg
No, I'm afraid not  By adding "text-align: center" won't center the image vertically and to center it horizontally by using that property, the image would have to be showed as "inline" element; otherwise "text-align: center" won't work. To center block elements you need "margin-left: auto" and "margin-right: auto". |
Ugh. My brain wasn't turned on when I wrote that.
The SVG code I posted does, in fact, center the image, both vertically and horizontally. That's handled by the "mid" in
preserveAspectRatio="xMidYMid". The containers are all styled to fill the body size, which in the absence of content that would overflow the bounds, fills the viewport. So by adding the image and telling it to scale to fit, centered, within that container, you're effectively centering within the viewport.
Try it in a browser, and you'll see that it remains centered, regardless of which dimension is larger than the content.
And because it is SVG, if you want to include captions, you can readily do so using SVG
text elements, giving you complete control over the page layout, and the resulting text should still be searchable as text in most readers.