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?
4 Answers
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>
-
4
-
3You 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 's) Nov 3, 2017 at 0:05
-
You're right. I misinterpreted the somewhat vague description initially. I've revised again. Mar 4, 2021 at 15:38
TL;DR—Prepend as many s as you need.
After trying all the options at hand, your best bet is to "manually" center the image prepending as many s as you need.
The best example is when you include the graphic using Markdown synthax:
Using <pre>
![Dry Paint][1]
Using
-
4What about the mobile site, the data dumps, and whatever other ways post are used? Doesn't feel like a good advise to me...– ArjanMar 30, 2012 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, 2012 at 20:18
-
7Actually, 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.– ArjanMar 30, 2012 at 21:13
-
2
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>, , 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>, , 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>|
-
1Might be helpful: I did an experiment and actually you can put the images in the header to prevent empty unused rows. Jul 25 at 8:50
Random 470×320 px image:
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:
(This is suboptimal solution, centering feature wanted.)
-
6
-
1True, but It's still a workaround to achieve plan B results OP may not be aware of.– ZweiflerFeb 12 at 10:46
-
1
->center<-here.