48

Since we can only use Markdown and a limited subset of HTML/CSS is it possible to center an image, or any block element for that matter, on the Stack Exchange sites?

18

You could use the <pre></pre> tags to position things manually I guess, but that is the only way I can imagine doing so.


                     http://i.stack.imgur.com/PHlmT.jpg

                                           http://i.stack.imgur.com/PHlmT.jpg

  • This wouldn't work very well with an image though. It would just show the Markup or <img> tag. – Ben S Oct 14 '09 at 14:29
  • 10
    @Ben S: So draw the image as ASCII art, then. Problem solved. – Hilarious Comedy Pesto Oct 14 '09 at 14:35
  • I see it does work with an image, but is there a way to not have the grey background? – Ben S Oct 14 '09 at 14:44
  • 1
    I settled on using a series of &nbsp;s to center without the background. – Ben S Oct 14 '09 at 14:46
  • Because until we see cornify, this sized pony will do. – random Oct 14 '09 at 14:54
  • Bronies?!? On a serious note, the lack of a center style/tag does seem like a curious omission, but I guess we all have our pet tags. ;) – Robert Ryan Nov 26 '12 at 19:30
  • This looks seriously broken and bad in the Android app.. – JonasCz Feb 24 '16 at 10:14
  • You provide explanation for one technique on how to do it but then go on to demonstrate two, it would be beneficial to have an explanation of both. (SpoilerAlert: it's &nbsp;'s) – RyanfaeScotland Nov 3 '17 at 0:05
13

TL;DR—Prepend as many &nbsp;s as you need.


After trying all the options at hand, your best bet is to "manually" center the image prepending as many &nbsp;s as you need.

The best example is when you include the graphic using Markdown synthax:

Using <pre>

        ![Dry Paint][1]

Using &nbsp;

                  Dry Paint

  • 2
    What about the mobile site, the data dumps, and whatever other ways post are used? Doesn't feel like a good advise to me... – Arjan Mar 30 '12 at 19:18
  • @Arjan, I've hit this link from my phone (Nexus S) and it looks good and centered. I guess it's my browser that just scales down the web version. How can I see the scenarios you mentioned? – Marius Butuc Mar 30 '12 at 20:18
  • 4
    Actually, the mobile CSS theme centers (and fits, if needed) all images, no hack needed at all. (And it "displays" the whitespace above the image.) I was just saying that one cannot center stuff using whitespace; it just adds noise I'd say, and it relies on some specific content width and font width. – Arjan Mar 30 '12 at 21:13
  • 1
    Note that each &nbsp; adds 4 pixels to 660 pixel max width. – Nae Dec 25 '17 at 3:46
0

Random 470×320 px image:

enter image description here

You can add artificial margins directly into the image, if you don't mind, that they will be preserver proportionally, so the graphics itself will be very small on small displays.

Modified image, canvas extended to 1600×320:

enter image description here

 

(This is suboptimal solution, centering feature wanted.)

You must log in to answer this question.

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