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

问题

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.

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

回答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!

回答3:

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

回答4:

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/

回答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.

回答6:

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>

回答7:

I'm surprised no one mentioned this way:

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

来源：https://stackoverflow.com/questions/3912694/using-markdown-how-do-i-center-an-image-and-its-caption

标签

html

css

Markdown

center