嵌入CSS是不好的:

![Flowers](/flowers.jpeg)

CSS在另一个文件:

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

我喜欢learnvst使用表格的答案，因为它是相当可读的(这是编写Markdown的一个目的)。

然而，在GitBook的Markdown解析器的情况下，除了一个空标题行，我还必须在它下面添加一个分隔行，以使表能够被识别并正确呈现:

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

分隔线至少需要包含三个破折号——。

最佳和最可定制的选项:

<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张以上的图像。

许多Markdown“额外”处理器支持属性。所以你可以像这样包含一个类名(PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

或者，备用的(我的，Kramdown, Python Markdown):

![Flowers](/flowers.jpeg){: .callout}

然后，当然，您可以以正确的方式使用样式表:

.callout {
    float: right;
}

如果您的文档支持这种语法，那么它将为您提供两全其美的服务:没有嵌入标记，样式表足够抽象，无需内容编辑器修改。

这对我很有用

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

我发现了一个很好的解决方案在纯Markdown与一个小css3 hack:-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

当图像alt以<或>结束时，遵循css3代码浮动图像在左侧或右侧。

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}