「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

背景

刚才在某群里无意间看到有位掘友提问：这个插入的图片怎么居中显示？其实我也早有这个疑问，只是懒得去处理。但是看到掘友有疑问，那作为热心肠的我必须帮他答疑解惑。

掘金原始居中方式

你会发现掘金原始的图片并不居中

尝试第1次

我们都知道，无论是Markdown还是富文本编辑器，最终在网页上的呈现方式都是一样的，无非是HTML+CSS+JS，通过以上简单的理论，我们开始第一次尝试，计划直接将Markdown的图片展示方式用HTML的<img>标签替代。

代码

<img style="align:center" src="https://www.proyy.com/skycj/data/images/2021-07-11/79ab0d1a9d544453b647b4f9aaff33a4.jpg" />
复制代码

效果

你会发现依然不居中，原因竟是直接在img标签中添加的样式竟然没有生效，证据如下。

尝试第2次

经过上面的失败，我们决定换一种方式，即直接使用style标签来定义样式。

代码

<style type="text/css">
img {align:center}
</style>
<img style="align:center" src="https://www.proyy.com/skycj/data/images/2021-07-11/79ab0d1a9d544453b647b4f9aaff33a4.jpg" />
复制代码

效果

img {align:center}

-_-// 简直没脸看啊，样式直接漏了。

尝试第3次

经过上面的失败，我决定了这次再不成功，我就弃笔从戎了！估计我这小身板儿也进不了部队，哈哈哈。这次我们计划用div包裹img标签，因为通常前端都是这么干的。

代码

<div align=center>
<img src="https://www.proyy.com/skycj/data/images/2021-07-11/79ab0d1a9d544453b647b4f9aaff33a4.jpg" />
</div>
复制代码

效果