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

最新推荐文章于 2024-03-10 17:45:20 发布

点亮～黑夜

最新推荐文章于 2024-03-10 17:45:20 发布

阅读量1.6w

点赞数 22

分类专栏： 8—Use(use)软件、包、工具等的安装及使用文章标签： Markdown HTML 图片并排显示

版权归个人所有，转载请告知，否则追求法律责任

本文链接：https://blog.csdn.net/weixin_41010198/article/details/86639739

版权

8—Use(use)软件、包、工具等的安装及使用专栏收录该内容

86 篇文章 11 订阅

订阅专栏

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

文章目录：

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

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

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

Markdown语法
HTML语法

一、Markdown语法

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

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

测试结果：如果图片过大，在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>

显示效果如下：

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>

显示效果如下：

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 高圆圆

注意
如果是截图之后的图片想要放到<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> 标签中，如下：