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

html css markdown center

108,681

Solution 1

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

Solution 2

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!

Solution 3

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/

Solution 4

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

Solution 5

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.

View more solutions

108,681

Author by

Chetan

Generalist software engineer with 10 years of experience shipping products featured by Apple and Google, ranging from full-stack mobile and web development, game development, UI / UX design, and AI / machine learning.

Updated on July 09, 2022

Comments

Chetan almost 2 years
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.
Chetan over 13 years

Can I use Markdown syntax inside the div?
MatTheCat over 13 years

I think Markdown is not used for positionning
Chetan over 13 years

Oh, I was looking for horizontal centering.
BalusC over 13 years

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.
Samuel Smith over 11 years

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.
Jason about 11 years

@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.
Chetan about 11 years

Note: This same method can be used for horizontal centering as well.
Thriveth almost 11 years

Seconded, the tag may be deprecated but in this case it is useful.
Med over 10 years

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>.
Mars over 9 years

Simple solutions that are deprecated in favor of complicated solutions shouldn't be, imo. Both should coexist. Sigh.
Shane Reustle about 9 years

Tip: If you're using bootstrap as well, the .text-center class already exists for you
Marc Rochkind about 9 years

Yes, <center> has been deprecated for many years. Yet, you can be sure that browsers will still support it fully in the year 2525.
CMCDragonkai over 8 years

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.
Alex Cio about 8 years

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!
Robbi Nespu about 7 years

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?
tremor about 7 years

In CSS, when margin: auto is used, an element will center relative to its container.
Nick Schwaderer almost 7 years

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.
Ahsan S. Sher almost 7 years

This is the answer, Now I know why jewels are at the bottom of the sea :wink:
WestCoastProjects about 5 years

I have upvoted every comment here along the lines of "deprecated? so what - it is useful"
Crystina over 2 years

is this supposed to be put in .md directly? the css part seems to get understood as text
Benjamin Luo about 2 years

Can confirm, this works for GitHub READMEs. Thanks for your answer