Take the 2-minute tour ×
Ask Different is a question and answer site for power users of Apple hardware and software. It's 100% free, no registration required.

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?

share|improve this question
    
You can try loading your own style sheet that contains css code for centering images. See Preferences/Advanced/Style sheet. However, this will affect all images from that point on... –  lhf Nov 26 '12 at 16:16
    
That's the problem, that I only want to make it work in the image only pages. –  Manuel Nov 26 '12 at 17:00
add comment

1 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 PreferencesAdvancedStyle 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.

share|improve this answer
    
Mmm. That's an improvement, but it is only horizontaly centered. I would like it to be also vertically (in the middle of the display). Thanks anyway. EDIT: moreover, it doesn't work in .svg only webs, i.e. that link, the wikipedia logo. May be, if that's not easy, the style cheat could have an easy way to say manually what images (png,gif,jpeg,bitmap,svg...) I want Safari to center... –  Manuel Nov 28 '12 at 22:46
    
I'm afraid that there's no way to center a single HTML element (i.e. without a containing tag) vertically using CSS. Safari renders the image within <html> and <body> tags, but there's no way in CSS to target (for example) "a <body> tag containing one and only one <img> tag" or "the parent element of this element here", so it can't be used to vertically center the image. –  maniacyak Nov 29 '12 at 0:13
    
SVG files are difficult. While they can be displayed within web pages using an <img> tag, they are actually XML documents in and of themselves so WebKit browsers like Safari and Chrome don't need wrap HTML around them in order to display them; they just render the XML document directly. This means that the SVG is the entire content of the page you are viewing, and it seems that Safari ignores custom stylesheets for documents that are not HTML. –  maniacyak Nov 29 '12 at 0:14
    
Ok. I hope there was some way to do it. But thanks for the help. Maybe a .plist change, or a terminal command... who knows. –  Manuel Nov 29 '12 at 0:16
    
Any bitmap image format that the browser natively understands (JPEG, PNG, GIF, BMP and TIFF) should be centered horizontally by the rule I provided. I don't think there's any way to treat them differently - they all look alike to the browser, more or less. –  maniacyak Nov 29 '12 at 0:16
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.