2

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?

Improve this question
2
  • 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, 2012 at 16:16
  • That's the problem, that I only want to make it work in the image only pages.
    – Manuel
    Nov 26, 2012 at 17:00

3 Answers 3

Reset to default
2

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.

Improve this answer
5
  • 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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 0:16
1

great inspiration. There is no functional plugin for the latest Safari and I really need it. I need the image centered vertically too, so I modified the above solution to: 

html > body > img:first-child:last-of-type {
  position: fixed; /* works with absolute */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* translateY(-50%) */
  max-width: 90%; /* related to it's container, not necessary, works with fixed */
  max-height: 90%; /* related to it's container, not necessary, works with fixed */
}
Improve this answer
0

in other words Safari sucks. I've tried using CSS to center and image both vertically and horizontally in Safari and it doesn't work in a responsive site. It will however work in FF, IE, Opera, and Chrome just fine. Well, actually you can statically center an image in Safari, but it will not be able to be responsive and scale with the window size and still be compatible with other browsers..

If you want to generically center an image you don't want to scale, you can use the following css:

We will pretend the image is 200wx100h pixels

<style type="text/css">
    .exactCenter {
        height:100px
        width:200px;
        position: fixed;
        top:50%;
        left:50%;
        margin-left:-100px;
        margin-top:-50px;
    }

The margins left and right are a minus half the width and height of your image. the Html in the Body would be placed in a div with the class (.exactCenter):

<div class="exactCenter"><img src="img/your image.jpg" name="Logo" width="100%" id="Centered Image"></div>

This should work in Safari for centering an image on screen both horizontally and vertically.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .