使用Markdown,如何将图像及其标题居中？

Question

我想最终得到:

Hello there!

      <image>
      This is an image

Hi!

图像和文本This is an image在页面上居中的位置.如何使用Markdown实现这一目标？

编辑:请注意,我希望在页面上水平居中图像和文本.

Answer 1

我想我只需要在我想要水平对齐任何东西的地方使用HTML.

所以我的代码看起来像这样:

Hello there!

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

Hi!

Answer 2

如果您使用kramdown,则可以执行此操作

Hello there!

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

Hi!

.center {
  text-align: center;
}

Answer 3

我认为我有一个简单的解决方案,因为你可以定义CSS.它也不需要任何扩展或HTML!首先是你的降价图像代码:

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

请注意添加的url哈希#center.

现在在CSS中添加此规则:

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

您应该能够像这样使用url哈希,就像定义类名一样.

要查看这个,请查看我的JSFiddle,使用SnarkDown在textarea中解析MarkDown - https://jsfiddle.net/8q41zbfj/

Answer 4

在Mou(也许是Jekyll),这很简单.

-> This is centered Text <-

因此,考虑到这一点,您可以将其应用于img语法.

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

此语法不适用于仅实现Daring Fireball上记录的内容的Markdown实现.

Answer 5

你需要一个具有定义高度的块容器,行高相同的值和垂直对齐的图像:middle; 它应该工作.

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

Answer 6

我很惊讶没有人以这种方式提及：

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

Answer 7

与kramdown（由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.

或使用@（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>