preface

According to Markdown, pictures can be placed on the same line, but the format is difficult to control, because the two pictures will be closely connected, even if spaces are added in the middle

The effect we want to achieve is similar to the following figure

Two schemes close to this display are provided below

Scheme 1: use the < Table > tag of Html

Scheme I
\qquad Use Html's table < Table > tag to control the display of pictures side by side

The example md code is as follows:

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

The example effect is as follows:

001.jpg

002.jpg

Note:
\qquad ① The CSDN markdown editor will not take effect on some style attribute settings of < Table > tags, such as invalid border=0 and invalid frame attribute settings
\qquad ② The CSDN markdown editor has the same effect on the rules attribute of the < Table > tag. Setting any legal value will hide the outer border, but the inner border cannot be hidden
\qquad ③ It is better to set the picture to the same size, otherwise the cell size will be inconsistent (the original size is required to be consistent, and the allocation of the same cell size set through the width attribute is still inconsistent)

advantage:
\qquad Easy to create annotations and align with pictures

Disadvantages:
\qquad The table border cannot be completely hidden at this time

Scheme 2: use < center > tag of Html

Scheme II
\qquad Use the < center > tag of Html to control the display of pictures side by side

The example md code is as follows:

<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/>

The example effect is as follows:

        
001.jpg                            002.jpg

Note:
\qquad Do not set the align attribute on the < img > tag. After setting the align attribute on all pictures, the entire < center > tag height will collapse, resulting in the dislocation of the following contents and poor display effect

advantage:
\qquad There is no frame like a table, and the effect looks ok

Disadvantages:
\qquad ① The picture size is too large to be displayed side by side due to automatic line wrapping
\qquad ② The annotation is not easy to align (the display effect of browsers on different clients is different, especially after the browser is resized)
\qquad ③ A lot of html space characters are used in the middle, which will be selected

Failed idea: use LaTeX to insert pictures and control alignment

As we all know, LaTeX formula can control alignment by using & in \ begin{aligned}         \ end{aligned}

Therefore, in theory, as long as the LaTeX module supported by Markdown can insert pictures, good picture side-by-side display and annotation alignment can be achieved

In fact, referring to the method of inserting pictures in LaTeX on the Internet, it is found that some packages need to be imported, which is not supported by LaTeX in Markdown, so it cannot be implemented

Attachment: single picture annotation alignment

programme
\qquad Use the < center > tag of Html to control the alignment of pictures and annotations

The example md code is as follows:

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

The example effect is as follows:

001.jpg