工具 | Markdown中图片居中

Markdown 是一种轻量级标记语言，被广泛应用于文档撰写和博客写作。在 Markdown 中，插入图片是非常常见的操作，但是很多人在插入图片时发现，无法居中对齐，略显遗憾。下面我们就来谈一谈如何让 Markdown 图片居中显示。

我们一般看到的MarkDown加载图片是这样的

![](url)

MarkDown是可以支持HTML、CSS的。

如：我们在md笔记中直接写以下代码

<div align=center>
	<img src="http://upload-images.jianshu.io/upload_images/2182065-91ff11ffeb37cff2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/>
</div>

# 此处的center可以更换
left（左对齐）、right（右对齐）、center（居中）

显示结果为：效果是居中。

使用HTML标签实现图片居中

为了让图片居中显示，我们可以使用 HTML 中的居中标签，例如使用

将图片包含起来，就可以实现图片居中显示了。具体的代码示例如下：为了让图片居中显示，我们可以使用 HTML 中的居中标签，例如使用将图片包含起来，就可以实现图片居中显示了。具体的代码示例如下：

<center>
    <img src="example.jpg" alt="example">
</center>

运行结果如下：

在上面的代码中，我们首先使用

标签将图片包含起来，然后在其中使用 标签插入图片。注意，这种方法在 HTML 中是被废弃的，但在 Markdown 中还可以使用。

使用CSS样式实现图片居中

除了使用 HTML 中的居中标签，我们还可以使用 CSS 样式来实现图片居中。具体来说，可以使用 text-align 属性，将其设置为 center，就可以让图片居中了。代码示例如下：

<link rel="stylesheet" type="text/css" href="./a.css">

# 在 CSS 中指定样式：
# 文件夹下创建a.css
.center {
    text-align: center;
}

# 在Markdown中插入图片：
![](example.jpg){: .center}

运行结果如下：

我们首先在 CSS 中定义了名为 .center 的类名，将 text-align 属性设置为 center，表示要将其中的内容居中。然后在 Markdown 中插入图片时，使用{: .center} 将 .center 类名应用于图片，即可实现图片居中。