Using Markdown, how do I center an image and its caption?

Question

I want to end up with:

Hello there!

      <image>
      This is an image

Hi!

Where the image and the text This is an image are centered on the page. How do I accomplish this with Markdown?

Edit: Note that I'm looking to horizontally center the image and text on the page.

Have a look [here](https://dev.to/bdavidxyz/markdown-center-image-39j1) — Dorian Grv, Dec 27 '22 at 14:24

score 59 · Answer 1 · answered Oct 17 '10 at 21:10

59

I figured that I'd just have to use HTML where I want to horizontally align anything.

So my code would look like this:

Hello there!

      <center><img src="" ...></center>
      <center>This is an image</center>

Hi!

answered Oct 17 '10 at 21:10

Chetan

46,743
31
106
145

25

The `` element is **deprecated** in HTML4 since 1998. Just use CSS to make it or its wrapper a block element with a fixed width and `margin: 0 auto;` on it. – BalusC Oct 17 '10 at 21:13
25

Deprecated doesn't mean it can't be used. Chetan has given a valid suggestion. I don't think he deserves his current -12 rating for this comment. – Matthieu Cormier Dec 14 '12 at 19:58
2

Seconded, the tag may be deprecated but in this case it is useful. – Thriveth Jul 02 '13 at 23:07
12

Of course it shouldn't be used, that's why "deprecated" exists. A one-liner CSS is the right way to do it, *inline* if you don't want a stylesheet. No reason at all to keep using ``. – Med Oct 29 '13 at 10:17
10

Simple solutions that are deprecated in favor of complicated solutions shouldn't be, imo. Both should coexist. Sigh. – Mars Dec 11 '14 at 17:57
Tip: If you're using bootstrap as well, the .text-center class already exists for you – Shane Reustle Mar 28 '15 at 04:10
13

Yes, has been deprecated for many years. Yet, you can be sure that browsers will still support it fully in the year 2525. – Marc Rochkind Apr 29 '15 at 18:36
1

This is useful in markdown if you don't want to or don't have access to the CSS style sheet, and is more expressive than typing an inline-style. – CMCDragonkai Oct 22 '15 at 10:02
2

This made my day. In this case important is more if deprecated means just bad practice or its wrong. `` is more appropriate in a markdown language instead of using css as the main intention of a markdown language is to minimize the work you have when writing because you do not want to concentrate all the time on formatting. Otherwise you could do it even in html. And markdown exists because html would be too complicated! – Alex Cio Mar 03 '16 at 12:05
2

I have upvoted every comment here along the lines of "deprecated? so what - it is useful" – WestCoastProjects Mar 19 '19 at 20:15
FYI - This does not work in gitlab's markdown. – Ph0t0n Aug 23 '23 at 19:37
For gitlab you need to use
xxxxx
– Ph0t0n Aug 23 '23 at 19:44

tremor · Answer 2 · 2019-03-21T02:43:04.393

44

I think I have a simple solution that will work given that you can define CSS. It also does not require any extensions or HTML! First your markdown image code:

![my image](/img/myImage.jpg#center)

Note the added url hash #center.

Now add this rule in CSS:

img[src*='#center'] { 
    display: block;
    margin: auto;
}

You should be able to use a url hash like this, almost like defining a class name.

To see this in action, check out my JSFiddle using SnarkDown to parse MarkDown in a textarea - https://jsfiddle.net/tremor/6s30e8vr/

edited Mar 21 '19 at 02:43

answered Apr 29 '17 at 03:19

tremor

3,068
19
37

It worked! But can you explain why the CSS part work? It just set to block and auto margin. No center style. How can it be centered? – Robbi Nespu May 12 '17 at 22:15
In CSS, when margin: auto is used, an element will center relative to its container. – tremor May 14 '17 at 14:19
pity I didn't find this sooner! – fromage9747 Oct 17 '22 at 07:43

Zombo · Answer 3 · 2012-08-31T15:03:46.337

22

If you are using kramdown, you can do this

Hello there!

{:.center}
![cardinal](/img/2012/cardinal.jpg)  
This is an image

Hi!

.center {
  text-align: center;
}

edited Aug 31 '12 at 15:03

answered Mar 06 '12 at 02:54

Zombo

1
62
391
407

score 18 · Answer 4 · edited Oct 14 '14 at 15:59

18

In Mou (and perhaps Jekyll) this is quite simple.

-> This is centered Text <-

So taking that in mind you can apply this to the img syntax.

->![alt text](/link/to/img)<-

This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.

edited Oct 14 '14 at 15:59

Ben Collins

20,538
18
127
187

answered Mar 03 '13 at 12:09

vdclouis

1,196
9
13

score 11 · Accepted Answer · answered Oct 12 '10 at 09:35

11

You need a block container with a defined height, same value for line-height and image with vertical-align:middle; It should work.

Hello there !

<div id="container">
    <img />
    This is an image
</div>

Hi !

#container {
    height:100px;
    line-height:100px;
}

#container img {
    vertical-align:middle;
    max-height:100%;
}

answered Oct 12 '10 at 09:35

MatTheCat

18,071
6
54
69

2

Can I use Markdown syntax inside the `div`? – Chetan Oct 12 '10 at 09:43
5

I think Markdown is not used for positionning – MatTheCat Oct 12 '10 at 12:09
Oh, I was looking for horizontal centering. – Chetan Oct 12 '10 at 20:24
1

@Chetan I don't believe you can. Once you go into HTML mode by opening a tag, only HTML goes through until you close that tag, and then the parsing goes back to markdown mode. – Jason Mar 13 '13 at 16:46
Note: This same method can be used for horizontal centering as well. – Chetan Mar 18 '13 at 17:05
is this supposed to be put in .md directly? the css part seems to get understood as text – Crystina Aug 20 '21 at 05:53

score 11 · Answer 6 · answered Oct 10 '19 at 12:16

11

I'm surprised no one mentioned this way:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

answered Oct 10 '19 at 12:16

Aliaksandr Sushkevich

11,550
7
37
44

3

Can confirm, this works for GitHub READMEs. Thanks for your answer – Benjamin Luo Apr 09 '22 at 19:40

score 7 · Answer 7 · answered Jan 08 '17 at 15:34

7

With kramdown (used by githubpages)

{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.

Or using the response from @(Steven Penny)

{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.

<style>
.mycenter {
    text-align:center;
}
</style>

answered Jan 08 '17 at 15:34

raisercostin

8,777
5
67
76

THIS. This is the answer I for some reason painfully spent an hour searching for. (the first one) Thank you @raisercostin. If I could upvote you three times I would. – Nick Schwaderer Aug 03 '17 at 09:02
2

This is the answer, Now I know why jewels are at the bottom of the sea :wink: – Ahsan S. Sher Aug 05 '17 at 22:30

score 2 · Answer 8 · answered Mar 13 '21 at 14:18

Here is a simple solution that does not use any deprecated tags or attributes:

Hello there!

<img style="display: block; margin: auto;"
src="https://stackoverflow.design/assets/img/logos/so/logo-print.svg">

<p style="text-align: center;">
This is an image
</p>

Hi!

Using Markdown, how do I center an image and its caption?

8 Answers8

Linked