Markdwon中多张图片的并排显示（Mardown的灵动使用技巧）_markdown图片并排

---

对于强迫症这，使用个Markdown也会因为排版有时看着不舒服，特别想把它掰弯，说掰就掰，还由于什么呢，让我们一起get新技能吧！！！

---

Markdown的图片居中主要有两种方式：

• Markdown语法
• HTML语法

一、Markdown语法

要一张图片接着一张图片的写，中间不能有换行。如果换行的话则图片也换行
正确的写法：

![描述](图片链接)![描述](图片链接)![描述](图片链接)
1

测试结果：如果图片过大，在csdn的markdown编辑器中是无法实现这种骚操作的，测试结果如下，还有通过csdn的markdown语法加如的图片默认都是会加上水印链接的

二、HTML语法实现图片的并排显示

1、 图片居中并排显示

<center class="half">
<img src="https://img-blog.csdnimg.cn/2019012511060017.png" width=00/>
<img src="https://img-blog.csdnimg.cn/2019012511060017.png" width=200/>
</center>
1
2
3
4

显示效果如下：

---

2、 图片左对齐并排显示

<figure>
<img src="https://img-blog.csdnimg.cn/2019012511060017.png" width=200/>
<img src="https://img-blog.csdnimg.cn/2019012511060017.png" width=200/>
<img src="https://img-blog.csdnimg.cn/2019012511060017.png" width=200/>
</figure>
1
2
3
4
5

显示效果如下：

3、并排显示在表格中且加上下表图注

实现方法如下代码，使用 HTML 语法，让图片包括在

标签里面，同时也可以加入图片标题，

用到的html标签说明：

• <tr>：表示 table row ——同一行的内容都放到这个标签中
• <td>：表示table data,——每一张图片的数据都放在这个里

要新建一个图片行，再加入一对<tr>标签，然后把图片放在<td>里<img src="图片地址">就行了。这里舍弃同时浏览器会自动缩放图片的大小，不用自己设置<img>的width和height属性，实在方便不少。之所以用到了<center>标签是为了让图片能在表格的单元格里居中。虽然浏览器会自己适应图片的大小，但是建议还是不要刁难浏览器，最好保证同一行的两个图片的尺寸相差不大，不然会有很丑的后果。

注意：

如果左右两张图片大小不一样可以加入width和height参数手动调节

<table>
    <tr>
        <td ><center><img src="https://img-blog.csdn.net/20180731150122598?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >图1  范冰冰 </center></td>
        <td ><center><img src="https://img-blog.csdn.net/20180731150122598?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"  >图2 范冰冰</center></td>
    </tr>

    <tr>
        <td><center><img src="https://img-blog.csdn.net/20180731150144421?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >图3 高圆圆</center></td>
        <td ><center><img src="https://img-blog.csdn.net/20180731150144421?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"  >图4 高圆圆</center> </td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11

---

注意
如果是截图之后的图片想要放到<img src>标签中，先将图片粘到markdown中，然后把链接粘贴到src中即可。
例如：
[在这里插入图片描述](https://img-blog.csdnimg.cn/20190222103154693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70)

把上面的红色链接部分插入到下面的<img> 标签中，如下：

<img src='上面链接中的全部内容（红色部分）'>

---

---

♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠