嵌入CSS是不好的:

![Flowers](/flowers.jpeg)

CSS在另一个文件:

img[alt=Flowers] { float: right; }

为了使图像稍微缩进一点，只需在img元素中使用一些不间断的空格。例如:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />

在警告框内，将图像和文本作为单个块中的段落的一部分并排对齐。

<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%;  float:right; padding:0.7em"/>
<b>isomorphism</b>  &rarr;  In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>

输出:

这对我很有用

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

我喜欢超级懒地用垂直管道(|)语法使用表格来对齐图像。这是支持一些Markdown口味(也支持纺织，如果这浮动你的船):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

or

| ![Flowers](/flowers.jpeg) | I am text to the right |

这不是最灵活的解决方案，但它适合我的大多数简单需求，易于阅读的markdown格式，你不需要记住任何CSS或原始HTML。

最佳和最可定制的选项:

<div style="display:flex; align-items: center;"> <div style="flex:1"> <img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135@1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/> </div> <div style="flex:1;padding-left:10px;"> <img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781@1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" /> </div> </div>

这将使第一个对齐到左边，第二个对齐到右边。也适用于2张以上的图像。