65

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?

5
22

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

<pre>
    <img src="..." title="CENTERED!">
</pre>
    http://i.stack.imgur.com/PHlmT.jpg
3
  • 3
    This looks seriously broken and bad in the Android app..
    – JonasCz
    Feb 24 '16 at 10:14
  • 3
    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) Nov 3 '17 at 0:05
  • You're right. I misinterpreted the somewhat vague description initially. I've revised again.
    – isherwood
    Mar 4 at 15:38
21

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

4
  • 4
    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
  • 1
    @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? Mar 30 '12 at 20:18
  • 6
    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
  • 2
    Note that each &nbsp; adds 4 pixels to 660 pixel max width.
    – Nae
    Dec 25 '17 at 3:46
8

Tables can actually center content

The relatively recent introduction of table formatting provides a way to actually center an image or other content. However, doing so results in additional table formatting around the image (a header row and borders), but it does actually center something, regardless of the width of the user's window. Unfortunately, using formatting like <pre>, &nbsp;, or other formatting/characters to push content a set distance to the right in order to "center" something can't take into account that users can choose the width of the window, making the "centering" using <pre>, &nbsp;, etc. to be substantially off from being centered.

Markdown used:

Using colons as part of the header/content separator, |:----:|, is what results in the cell being centered. With only one cell in the table, the entire content is centered within the post.

||
|:----:|
|[![Artist concept image of "the newly forming exoplanet PDS 70b"][1]][2]<br><sub>[image credit: NASA, ESA, STScI, Joseph Olmsted (STScI)](https://www.nasa.gov/feature/goddard/2021/hubble-watches-how-a-giant-planet-grows)</sub>|
-1

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.)

1
  • 3
    That's modifying the image, not aligning the image.
    – Mast
    Nov 8 '19 at 7:14

You must log in to answer this question.

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