Markdown图片并排展示、图注对齐

前言

按Markdown的展示，是可以把图片做到放到同一行的，但是格式却难以控制，因为两张图片会紧密连在一起，即便中间加入空格也难以控制

而我们想要完成的效果就类似下图

下面提供两种比较贴近这种展示的方案

方案一：利用Html的<table>标签

方案一
\qquad 使用Html的表格<table>标签控制图片并排展示

示例md代码如下：

<table rules="none" align="center">
	<tr>
		<td>
			<center>
				<img src="https://img-blog.csdnimg.cn/293b792757c24b8caa1ffba18ce76831.jpg" width="60%" />
				<br/>
				<font color="AAAAAA">001.jpg</font>
			</center>
		</td>
		<td>
			<center>
				<img src="https://img-blog.csdnimg.cn/f70c9b6462314611828f3349942b1227.jpg" width="60%" />
				<br/>
				<font color="AAAAAA">002.jpg</font>
			</center>
		</td>
	</tr>
</table>

示例效果如下：

001.jpg

002.jpg

注意点：
\qquad ① CSDN-Markdown编辑器对<table>标签的一些样式属性设置不会生效，如border=0无效、frame属性设置无效
\qquad ② CSDN-Markdown编辑器对<table>标签的rules属性效果一致，设置任意合法的值都将隐藏外框线，但内框线无法隐藏（另外，实际上，外框线的隐藏只有在编辑预览效果里能看到，真正到了文章浏览依然不能做到隐藏外框线）
\qquad ③ 图片的设置最好大小一致，不然会出现单元格大小不一致的现象（要求原尺寸大小一致，不同尺寸图片通过width属性设置相同大小后，单元格大小分配依然不一致）

优点：
\qquad 便于创建图注、并与图片对齐

缺点：
\qquad 暂时无法完全隐藏表格框线，无法真正在文章浏览时隐藏任何表格框线

方案二：利用Html的<center>标签

方案二
\qquad 使用Html的<center>标签控制图片并排展示

示例md代码如下：

<center>
	<img src="https://img-blog.csdnimg.cn/293b792757c24b8caa1ffba18ce76831.jpg" width="30%" />
	&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
	<img src="https://img-blog.csdnimg.cn/f70c9b6462314611828f3349942b1227.jpg" width="30%" />
	<br/>
	<font color="AAAAAA">001.jpg</font>
	&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
	&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
	&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
	<font color="AAAAAA">002.jpg</font>
</center>
<br/>

示例效果如下：

        
001.jpg                            002.jpg

注意点：
\qquad 不要给<img>标签设置align属性，所有图片都设置align属性后，整个<center>标签高度会坍塌，导致后面的内容错位，展示效果很糟糕

优点：
\qquad 没有表格那样的框线，看上去效果还行（仅限编辑时的预览）

缺点：
\qquad ① 图片尺寸太大会自动换行导致无法并排显示
\qquad ② 图注不便于对齐（光是不同客户端的浏览器展示效果就不一样了，浏览器大小调整后就更是如此）
\qquad ③ 中间使用了大量html的空格符，会被选中
\qquad ④ 大概是CSDN更新了吧，编辑时的预览样式和展示时的浏览样式不一致，所以上面的示例中，图片会换行展示（编辑时，<img>标签会被视为内联元素，浏览时，<img>标签会被视为块级元素）

未能实现的思路：使用LaTeX插入图片并控制对齐

众所周知，LaTeX公式可以通过\begin{aligned}     \end{aligned}的方式、在其中使用&来控制对齐

所以理论上，只要Markdown所支持的LaTeX模块可以插入图片，就可以实现很好的图片并排展示、图注对齐

实际上，参考了网上LaTeX的插入图片的方式，发现都需要导入一些包，这并不是Markdown中的LaTeX所支持的，所以无法实现

附：单张图片图注对齐

方案
\qquad 使用Html的<center>标签控制图片与图注对齐

示例md代码如下：

<center>
	<img src="https://img-blog.csdnimg.cn/293b792757c24b8caa1ffba18ce76831.jpg" width="30%" />
	<br/>
	<font color="AAAAAA">001.jpg</font>
</center>

示例效果如下：

001.jpg