[doxygen] markdown images are displayed in the center

Add image path

Citing images in markdown

use syntax

![html显示名字](图片名字)

It should be noted here that doxygen has already specified imagethe path, so when quoting a picture, just write the name of the picture directly, instead of writing the relative path

Images referenced in this way are centered by default when generating doxygen documentation

Image to the left

markdown standard syntax

Add after the URL of the picture #pic_left, #pic_right, #pic_centeryou can

![show_name](../pic_test.png#pic_left)

This syntax is markdown standard syntax, not applicable in doxygen

example

![arm interrupt](https://img-blog.csdnimg.cn/771ab8b7a2824e208f49cfa75656e04e.png#pic_left)

Effect

Doxygen makes markdown pictures left syntax

<img src="pic_test.png" align="left"/>
<div style="clear: both;"></div>

The effect of these two sentences is to create a left-floating image in HTML, and use <div style="clear: both;"></div> code to clear the previous floating elements.

• The first sentence <img src="pic_test.png" align='left'/>creates a left-floating image. The align='left' attribute aligns the image to the left.

• The second sentence <div style="clear: both;"></div>is a HTMLcode that creates a clear element. In HTMLand CSS, clear: both;the attribute is used to clear the preceding floated element.

By adding this code, the previous floated element (in this case the left-floated image) is cleared and a new block formatting context is created for the following content.

This ensures that the following content appears below the clear element, i.e. the text appears below the image.
example

<img src="https://img-blog.csdnimg.cn/771ab8b7a2824e208f49cfa75656e04e.png" align="left"/>
<div style="clear: both;"></div>

Effect

Continue to enter text later. . . . . .

If there is no <div style="clear: both;"></div>such sentence, the subsequent input text will not wrap to the end of the picture, and the typesetting of the subsequent text will be messed up.
example

<img src="https://img-blog.csdnimg.cn/771ab8b7a2824e208f49cfa75656e04e.png" align='left'/>

Effect

Continue to enter text later. . . . . .
Here you can see that the subsequent text does not wrap to the bottom of the picture

There is no line break above to the bottom of the picture, here are all placeholders x
x
x
x
x
x
x
x
x
x

Display the image to the left and display the image caption

In the above method, although the picture can be displayed on the left, in the HTML syntax, <img> the tag itself does not provide the attribute to specify the title of the picture.

use syntax

<div>
  <img src="picture_name.png" alt="Image" align="left">
  <div style="clear: both;"></div>
  <div class="caption">这是图片的标题或说明文字。</div>
</div>

• The outermost <div>element acts as a container for images and titles.
• <img> Labels are used to display images. srcattribute specifies the path to the image file (here it is "picture_name.png"). altattribute provides alternate text for the image, which will be displayed if the image cannot be loaded. alignThe property is set to leftalign the image to the left.
• The element with inline styles clear: both; <div>is used to clear any floated elements above it. This ensures that the title appears below the image, even if other floated elements are present.
• The final <div>element has a class name "caption"that contains the actual title or caption for the image.
  By combining these elements and styles, the code creates a layout where the image is left-aligned and the title appears below the image.