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

问题描述

我想要结束：

Hello there!

      <image>
      This is an image

Hi!

图像和文本 This is an image 位于页面中心的位置。使用 Markdown 如何实现？

编辑：请注意，我正在寻找在页面上的图像和文本水平居中。

最佳解决思路

您需要一个具有定义的高度的块容器，line-height 的值和 vertical-align 的图像相同：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%;
}

次佳解决思路

我想我只需要使用 HTML，我想水平对齐任何东西。

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

Hello there!

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

Hi!

第三种解决思路

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

Hello there!

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

Hi!

.center {
  text-align: center;
}

第四种思路

在 Mou(也许 Jekyll) 这很简单。

-> This is centered Text <-

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

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

对于仅实现 Daring Fireball 记录的标记的 Markdown 实现，此语法不起作用。

第五种思路

我认为我有一个解决方案应该工作，因为您可以定义 CSS，并且不需要任何扩展。首先你的降价图像代码：

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

注意添加的 url 哈希 #center 。

现在在 CSS 中添加这个规则

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

你应该能够像这样使用一个类似于定义一个类名的 url 哈希。

参考文献

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

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。