【Markdown】自用语法_markdown 图片左右对齐-CSDN博客

本文链接：https://blog.csdn.net/m0_47867419/article/details/137836781

本文介绍了如何在HTML中使用CSS控制图片的尺寸（像素值或百分比）以及对齐方式（居中对齐），展示了前端开发者常用的图片布局技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🍹 emoji

这个链接里面有完整的代码 https://gist.github.com/rxaviers/7360908，部分展示如下：

在这里插入图片描述

🍺 字体字号文本颜色

<font face="黑体">黑体字</font>
<font face="微软雅黑">微软雅黑</font>
<font face="STCAIYUN">华文彩云</font>
<font color=red>红色</font> <font color=#008000>绿色</font> <font color=Blue>蓝色</font> 
<font color=cyan>青色</font> <font color=magenta>洋红色</font>   
<font size=5>尺寸5</font>
<font face="黑体" color=green size=5>黑体，绿色，尺寸为5</font>

黑体字
微软雅黑
华文彩云
红色绿色蓝色
青色洋红色
尺寸5
黑体，绿色，尺寸为5

🍸 插入图片

使用HTML:

<img src="./xxx.png" width = "xxx" height = "xxx"  />

比如说我们插入一个图片，系统会自动帮我们生成一个图片链接

把这段链接插入即可

<img src="https://i-blog.csdnimg.cn/blog_migrate/344fe5d6a47475525f6fafbe15b20c1b.jpeg"  width = "100"/>

🍟 调整大小

既可以和上面一样直接调整长和宽，也可以用百分比：

<img src="https://i-blog.csdnimg.cn/blog_migrate/344fe5d6a47475525f6fafbe15b20c1b.jpeg"  width = "20%"/>

🍕 对齐方式

如果需要居中(左对齐就left, 右对齐就right)：

<div  align="center">
<img src="https://i-blog.csdnimg.cn/blog_migrate/344fe5d6a47475525f6fafbe15b20c1b.jpeg"  width = "20%"/>
</div>