使用 Markdown，如何将图像及其标题居中？答案

【问题标题】：Using Markdown, how do I center an image and its caption?使用 Markdown，如何将图像及其标题居中？
【发布时间】：2011-04-24 04:25:47
【问题描述】：

我想结束：

Hello there!

      <image>
      This is an image

Hi!

图片和文字This is an image在页面的中心位置。如何使用 Markdown 完成此任务？

编辑：请注意，我希望将页面上的图像和文本水平居中。

【问题讨论】：

标签： html css markdown center

【解决方案1】：

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

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

Hello there!

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

Hi!

【讨论】：

<center> 元素自 1998 年起在 HTML4 中被弃用。只需使用 CSS 使其或其包装器成为具有固定宽度和 margin: 0 auto; 的块元素即可。
已弃用并不意味着它不能使用。 Chetan 给出了一个有效的建议。我认为他不应该得到目前的 -12 评级。
当然不应该使用它，这就是“弃用”存在的原因。如果您不想要样式表，则使用单行 CSS 是正确的方法，inline。完全没有理由继续使用<center>。
不推荐使用复杂解决方案的简单解决方案，imo。两者应该共存。叹息。
是的，已被弃用多年。但是，您可以肯定，浏览器在 2525 年仍将完全支持它。

【解决方案2】：

如果您可以定义 CSS，我想我有一个简单的解决方案。它也不需要任何扩展或 HTML！首先是您的降价图像代码：

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

注意添加的 url 哈希 #center。

现在在 CSS 中添加这条规则：

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

您应该能够使用这样的 url 哈希，几乎就像定义类名一样。

要查看实际情况，请查看我的 JSFiddle，使用 SnarkDown 解析文本区域中的 MarkDown - https://jsfiddle.net/tremor/6s30e8vr/

【讨论】：

成功了！但是你能解释为什么 CSS 部分有效吗？它只是设置为阻止和自动边距。没有中心风格。怎么能居中呢？
在 CSS 中，当使用 margin: auto 时，元素将相对于其容器居中。

【解决方案3】：

如果你使用kramdown，你可以这样做

Hello there!

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

Hi!

.center {
  text-align: center;
}

【讨论】：

【解决方案4】：

在Mou（也许还有 Jekyll）中，这很简单。

-> This is centered Text <-

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

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

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

【讨论】：

【解决方案5】：

您需要一个具有定义高度的块容器，行高和图像的值相同，垂直对齐：中间；它应该可以工作。

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

【讨论】：

我可以在div中使用Markdown语法吗？
我觉得 Markdown 不是用来定位的
哦，我正在寻找水平居中。
@Chetan 我不相信你可以。通过打开标签进入 HTML 模式后，只有 HTML 会通过，直到您关闭该标签，然后解析会返回到 markdown 模式。
注意：同样的方法也可以用于水平居中。

【解决方案6】：

我很惊讶没有人这样提到：

Hello there!

<p align="center">

  <img src="">
  This is an image

</p>

Hi!

【讨论】：

【解决方案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>

【讨论】：

这个。这是我出于某种原因痛苦地花了一个小时寻找的答案。（第一个）谢谢@raisercostin。如果我能对你投三票，我会的。
这就是答案，现在我知道为什么珠宝在海底了:wink:

【解决方案8】：

这是一个简单的解决方案，不使用任何已弃用的标签或属性：

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!

【讨论】：