Images centered on safari

graphicssafari

Is there a way (preferably stable —doesn't matter if it's difficult to configure— but you forget about it once done) to make Safari displaying images centered?

I mean, if you are viewing an image www.blah.blah/blah.png (or .jpeg, or .svg, or any image), Safari aligns it at the left top corner. I would like it to be centered on the screen. Is that possible?

Best Answer

Building on lhf’s comment above, when you view an image in Safari it’s actually still HTML under the surface, so it’s possible to apply a custom stylesheet. This style declaration should do what you want. I've tested it in Safari 6.

html > body > img:first-child:last-of-type { display: block; margin: 0 auto; }

You'll need to save that line as a file with the extension ‘.css’, then choose it via Safari's Preferences → Advanced → Style sheet setting.

Here's the logic I used to come up with the code.

If there is an <img> element that is:

  • a direct child of a <body> element, which is itself a direct child of an <html> element
  • the first element within the <body> element
  • the last element of that type (i.e. <img>) within the <body> element

…then center it by setting the side margins to be calculated automatically.

It's very unlikely (though not impossible) that you could encounter a page with only one image on it that happens to be the first element on the page, in which case this rule would also apply. Other than that it should work as you intend.

Related Question