这里有一个最简单(但不是最漂亮)的解决方案:在整个东西周围做一个表格。显然存在缩放问题，这就是为什么我用HTML给出示例的原因，这样您就可以轻松地修改图像大小。这对我很管用。

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |

你可以用表格。它工作得很好。

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

结果:

在投票结果最前面的答案中，我发现一个更明确的答案是使用jekyll语法向某个东西添加一个类，然后按这种方式设置它的样式。

所以在帖子中，你可以这样写:

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

然后在你的CSS文件中，你可以这样做:

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: lightgrey;

出来后看起来不错!

对于Kramdown，你可以使用{:refdef: style="text-align: center;"对齐中心

{:refdef: style="text-align: center;"}
![example](https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg){: width="50%" .shadow}
{: refdef}
{:refdef: style="text-align: center;"}
*Fig.1: This is an example image. [Source](https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg)*
{: refdef}

你需要在文章的开头添加{::options parse_block_html="true" /}。

如果你不想使用任何插件(这意味着你可以直接将它推送到GitHub，而不需要先生成站点)，你可以在_includes中创建一个名为image.html的新文件:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

然后显示图像从您的markdown:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

我知道这是一个老问题，但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或figcaption标签，但这将是一个简单的替代方案，无需使用任何插件。

在你的标记中，你可以用强调标签包装标题，并将其直接放在图像的下面，而不需要插入新的行，如下所示:

![](path_to_image)
*image_caption*

这将生成以下HTML:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

然后在你的CSS中，你可以使用下面的选择器来设置它的样式，而不会干扰页面上的其他em标签:

img + em { }

注意，在图片和标题之间不能有空行，因为那样会生成:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

除了em，你也可以使用任何你想要的标签。只要确保有一个标签，否则你将无法设置它的样式。