【doxygen】markdown 图片居中显示

添加图片路径

在这里插入图片描述

使用语法

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

这里需要注意的是，doxygen 已经指定了 image 路径，所以引用图片的时候直接写图片名字即可，不用再写相对路径

使用这种方法引用的图片在生成 doxygen 文档时默认是居中显示的

在图片的 URL 后面加上 #pic_left ，#pic_right，#pic_center 即可

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

这种语法是 markdown 标准语法，在 doxygen 中并不适用

示例

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

效果
arm interrupt

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

这两句的作用是在HTML中创建一个左浮动的图片，并使用<div style="clear: both;"></div> 代码来清除前面的浮动元素。

扫描二维码关注公众号，回复： 15531662 查看本文章

第一句 <img src="pic_test.png" align='left'/> 创建了一个左浮动的图片。 align=‘left’ 属性使图片靠左对齐。
第二句 <div style="clear: both;"></div> 是一个 HTML 代码，用于创建一个清除元素。在 HTML 和 CSS 中， clear: both;属性用于清除前面的浮动元素。

通过添加这段代码，可以清除前面的浮动元素（在这种情况下是左浮动的图片），并为接下来的内容创建一个新的块格式化上下文。

这样可以确保接下来的内容出现在清除元素的下方，即文本出现在图片的下方。
示例

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

效果

后面继续输入文字。。。。。。

如果没有 <div style="clear: both;"></div> 这一句，那么后续输入的文字不会换行到图片末尾，后续文字的排版也就乱了。
示例

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

效果

后面继续输入文字。。。。。。
这里可以看到，后续的文字没有换行到图片底部

上面没有换行到图片底部，这里都是占行符x
x
x
x
x
x
x
x
x
x

上面的方法中图片虽然可以靠左显示，但是在 HTML 语法中， <img> 标签本身并没有提供指定图片标题的属性。

使用语法

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

最外层的 <div> 元素用作容器，用于容纳图片和标题。
<img> 标签用于显示图片。 src 属性指定了图片文件的路径（在这里是 "picture_name.png"）。 alt 属性为图片提供替代文本，如果图片无法加载，将显示该文本。 align 属性设置为 left，将图片左对齐。
带有内联样式 clear: both; 的 <div> 元素用于清除它上面的任何浮动元素。这确保标题出现在图片下方，即使存在其他浮动元素。
最后的 <div> 元素具有类名 "caption"，其中包含了图片的实际标题或说明文字。
通过组合这些元素和样式，代码创建了一个布局，其中图片左对齐，标题出现在图片下方。