Question

我正在制作一个每月发布问题文章的网站。它很简单，我认为使用Markdown编辑器（如Stack Overflow中的WMD编辑器）将是完美的。

然而，他们确实需要能够在给定段落中对齐图像。

我看不出用现有系统做到这一点的方法 - 有可能吗？

Answer 1

您可以在Markdown中嵌入HTML，因此您可以执行以下操作：

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

Answer 2

许多Markdown“额外”处理器支持属性。所以你可以包含一个类名（PHP Markdown Extra）：

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

或者，（Maruku，Kramdown，Python Markdown）：

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

然后，当然，您可以正确使用样式表：

.callout {
    float: right;
}

如果你的语法支持这种语法，它会为你提供两全其美的效果：没有嵌入式标记，以及足以不需要内容编辑器修改的样式表摘要。

Answer 3

我在纯Markdown 中找到了一个很好的解决方案，带有一点 CSS 3 hack ： - ）

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

当image alt以<或>结尾时，请按照左侧或右侧的CSS 3代码浮动图片。

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

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

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

Answer 4

嵌入CSS很糟糕：

![Flowers](/flowers.jpeg)

CSS在另一个文件中：

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

Answer 5

我喜欢通过使用表格将图像与垂直管道（|）语法对齐来超级懒惰。这有一些Markdown风格支持（如果它漂浮在您的船上，也由Textile支持）：

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

或

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

这不是最灵活的解决方案，但它对我的大多数简单需求都有好处，易于以降价格式阅读，而且您不需要记住任何CSS或原始HTML。

Answer 6

我有替代上面使用ALT标记和alt标记上的CSS选择器的方法...而是添加这样的URL哈希：

首先是Markdown图片代码：

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

请注意添加的网址哈希#center。

现在使用CSS 3属性选择器在CSS中添加此规则，以选择具有特定路径的图像。

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

你应该能够使用这样的URL哈希，就像定义一个类名一样，并不像有些人对该解决方案所评论的那样滥用ALT标记。它也不需要任何额外的扩展。做一个左右浮动或你可能想要的任何其他风格。

Answer 7

更简洁的方法就是将p#given img { float: right }放在样式表中，或放在<head>中并包含在style标签中。然后，只需使用降价![Alt text](/path/to/img.jpg)。

Answer 8

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Markdown中的markdown属性。

Answer 9

如果您在Python中实现它，则an extension允许您添加HTML键/值对和类/ ID标签。语法是：

![A picture of a cat](cat.png){: style="float:right"}

或者，如果嵌入式造型不能漂浮你的船，

![A picture of a cat](cat.png){: .floatright}

使用相应的样式表stylish.css：

.floatright {
    float: right;
    /* etc. */
}

Answer 10

我喜欢learnvst's answer使用这些表，因为它非常易读（这是编写Markdown的一个目的）。

然而，在GitBook的Markdown解析器的情况下，除了空标题行之外，我还必须在其下添加一个分隔线，以便表格被识别并正确呈现：

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

分隔线需要包含至少三个短划线---。

Answer 11

作为greg said，您可以在Markdown中嵌入HTML内容，但Markdown的一个要点是避免必须拥有大量（或任何）CSS / HTML标记知识，对吧？这就是我的工作：

在我的Markdown文件中，我只是指示我的所有wiki编辑器嵌入包装所有图像的内容如下：

'<div> // Put image here  </div>`

（当然......他们不知道<div>意味着什么，但这不重要）

因此Markdown文件如下所示：

<div>
![optional image description][1]
</div>

[1]: /image/path

在包含整个页面的CSS内容中，我可以使用图像标记执行任何操作：

img {
   float: right;
}

当然你可以用CSS内容做更多的事情......（在这种特殊情况下，使用div包装img标签可以防止其他文本包裹图像......这只是一个例子，虽然），但恕我直言 Markdown 的意思是你不希望潜在的非技术人员进入CSS / HTML的细节......这取决于你作为一个网络开发人员来制作你的将页面包装为尽可能通用且干净的CSS内容，但您的编辑再次无需知道。

Answer 12

我有同样的任务，我通过添加以下内容将我的图像对齐：

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

要将图像对齐到左侧或中央，请替换

<div style="text-align: right">

与

<div style="text-align: center">
<div style="text-align: left">

Answer 13

这对我有用

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

Answer 14

最简单的方法是将图像包装在中心标签中，如此......

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

可以在此处测试与Markdown有关的所有事项 - http://daringfireball.net/projects/markdown/dingus

当然，<center>可能会被弃用，但它很简单且有效！

降价和图像对齐

14 个答案: