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

P

8

52

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.

Paucity answered 12/10, 2010 at 8:14 Comment(1)

Have a look here – Sadness 27/12, 2022 at 14:24

I

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%;
}

Iggie answered 12/10, 2010 at 9:35 Comment(6)

Can I use Markdown syntax inside the div? – Paucity 12/10, 2010 at 9:43

I think Markdown is not used for positionning – Iggie 12/10, 2010 at 12:9

Oh, I was looking for horizontal centering. – Paucity 12/10, 2010 at 20:24

@Paucity 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. – Marmoreal 13/3, 2013 at 16:46

Note: This same method can be used for horizontal centering as well. – Paucity 18/3, 2013 at 17:5

is this supposed to be put in .md directly? the css part seems to get understood as text – Pilau 20/8, 2021 at 5:53

P

60

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!

Paucity answered 17/10, 2010 at 21:10 Comment(12)

The <center> 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. – Goodwin 17/10, 2010 at 21:13

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. – Astounding 14/12, 2012 at 19:58

Seconded, the tag may be deprecated but in this case it is useful. – Contrariwise 2/7, 2013 at 23:7

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 <center>. – Weksler 29/10, 2013 at 10:17

Simple solutions that are deprecated in favor of complicated solutions shouldn't be, imo. Both should coexist. Sigh. – Mendelian 11/12, 2014 at 17:57

Tip: If you're using bootstrap as well, the .text-center class already exists for you – Motor 28/3, 2015 at 4:10

Yes, <center> has been deprecated for many years. Yet, you can be sure that browsers will still support it fully in the year 2525. – Barcellona 29/4, 2015 at 18:36

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. – Epicene 22/10, 2015 at 10:2

This made my day. In this case important is more if deprecated means just bad practice or its wrong. <center> 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! – Infix 3/3, 2016 at 12:5

I have upvoted every comment here along the lines of "deprecated? so what - it is useful" – Stacey 19/3, 2019 at 20:15

FYI - This does not work in gitlab's markdown. – Blond 23/8, 2023 at 19:37

For gitlab you need to use <div align="center">xxxxx</div> – Blond 23/8, 2023 at 19:44

E

47

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/

Extent answered 29/4, 2017 at 3:19 Comment(4)

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? – Vinaya 12/5, 2017 at 22:15

In CSS, when margin: auto is used, an element will center relative to its container. – Extent 14/5, 2017 at 14:19

pity I didn't find this sooner! – Schluter 17/10, 2022 at 7:43

What a beast! Everybody using HTML in Markdown and then this. Very very nice solution – Cleotildeclepe 27/3 at 18:7

P

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;
}

Photometer answered 6/3, 2012 at 2:54 Comment(0)

T

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.

Telemachus answered 3/3, 2013 at 12:9 Comment(0)

I

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%;
}

Iggie answered 12/10, 2010 at 9:35 Comment(6)

Can I use Markdown syntax inside the div? – Paucity 12/10, 2010 at 9:43

I think Markdown is not used for positionning – Iggie 12/10, 2010 at 12:9

Oh, I was looking for horizontal centering. – Paucity 12/10, 2010 at 20:24

@Paucity 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. – Marmoreal 13/3, 2013 at 16:46

Note: This same method can be used for horizontal centering as well. – Paucity 18/3, 2013 at 17:5

is this supposed to be put in .md directly? the css part seems to get understood as text – Pilau 20/8, 2021 at 5:53

P

11

I'm surprised no one mentioned this way:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

Philipphilipa answered 10/10, 2019 at 12:16 Comment(1)

Can confirm, this works for GitHub READMEs. Thanks for your answer – Douala 9/4, 2022 at 19:40

M

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>

Muth answered 8/1, 2017 at 15:34 Comment(2)

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. – Seleucid 3/8, 2017 at 9:2

This is the answer, Now I know why jewels are at the bottom of the sea :wink: – Propose 5/8, 2017 at 22:30

K

2

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!

Karyosome answered 13/3, 2021 at 14:18 Comment(0)

Recommended topics

Hot tags