Markdown编辑小技巧——图片篇（二）

插入图片编辑

有时候需要对图像的位置做出调整。

1. 简单调整
CSDN调整图片位置其实就是只需要在图片的URL后添加下面代码。
代码：

#pic_center
#pic_right
默认就是左对齐

![](https://img-blog.csdnimg.cn/img_convert/823c2e3f01988b470bb7abd442280f54.png)
![](https://img-blog.csdnimg.cn/img_convert/1d8e4a5c7f345360c53d205a8b2b1cc5.png#pic_center)
![](https://img-blog.csdnimg.cn/img_convert/e81621de01c32613480e92b9555e0a49.png#pic_right)

2. 使用HTML的标签

<img src="https://..." align=right />					--会与图片并列
<div align=center><img src="https://..." ><img/></div>		--外层加个div块级标签可以解决
<img src="https://..." width="200" height="200" align=right />	---调节大小

依次：

<img src= "https://i-blog.csdnimg.cn/blog_migrate/46cd626c31cf7285eed029ee1ef2bee2.png" align=right />这是一只在右边的猫！
可以看到默认左对齐！
所以文字在左边！

这是一只在右边的猫！
可以看到默认左对齐！
所以文字在左边！

<div align=center><img src="https://i-blog.csdnimg.cn/blog_migrate/46cd626c31cf7285eed029ee1ef2bee2.png" ><img/></div>这是一只阳光的猫！
它跑去中间了！
文字还在原地！

这是一只阳光的猫！ 它跑去中间了！ 文字还在原地！

<div align=center><img src="https://i-blog.csdnimg.cn/blog_migrate/46cd626c31cf7285eed029ee1ef2bee2.png" width="150" height="150" /><img/></div>
<div align=center>
这是一只什么猫啊！
大到模糊！文字也来中了！
</div>

这是一只什么猫啊！ 阳光到模糊！文字也来中间了！

3. 对于从文件里导入方式以及CSDN支持的直接更改位置和大小

@import "01.png" {width="300px" height="200px" title="图片的标题" alt="我的 alt" }
![Alt](https://img-blog.csdnimg.cn/img_convert/fd5d71889f6f4f1a46f49df3e764421e.png#pic_center =100x100)

4. 图片堆积

<img src="https://i-blog.csdnimg.cn/blog_migrate/fd5d71889f6f4f1a46f49df3e764421e.jpeg"  width="150" height="150" align=right /><img src="https://i-blog.csdnimg.cn/blog_migrate/fd5d71889f6f4f1a46f49df3e764421e.jpeg"  width="150" height="150" align=right /> 
                	   
<img src="https://i-blog.csdnimg.cn/blog_migrate/fd5d71889f6f4f1a46f49df3e764421e.jpeg"  width="150" height="150" align=right />

可以看到如果直接使用img标签，会出现图片依次并列到右边的问题，如果标签之间加入回车 图片的位置就会变动，根据场景需要可能会不好管理，这时候需要使用div这种块级标签来解决

<div align=center style="position: absolute;width:1000px;height:50000;background:#f00;"><img src="https://i-blog.csdnimg.cn/blog_migrate/fd5d71889f6f4f1a46f49df3e764421e.jpeg" width="50" height="50" /></div>





<div align=center ><img src="https://i-blog.csdnimg.cn/blog_migrate/fd5d71889f6f4f1a46f49df3e764421e.jpeg" width="50" height="50" /></div>

可以看到每个div快都会独占一行，即时企图直接设置div的style属性 Markdown都是不会解析的
中间如果不加其他块，只加回车是不会变动位置的