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

Posted 2023-03-05

【中文标题】使用 Markdown，如何将图像及其标题居中？

【英文标题】：Using Markdown, how do I center an image and its caption?

【发布时间】：2011-04-24 04:25:47

【问题描述】：

我想结束：

Hello there!

      <image>
      This is an image

Hi!

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

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

【参考方案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。两者应该共存。叹息。

是的，

【参考方案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://***.design/assets/img/logos/so/logo-print.svg">

<p style="text-align: center;">
This is an image
</p>

Hi!