https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在制作一个每月发布问题文章的网站。它很简单，我认为在Stack中使用Markdown编辑器（如 WMD ） ！> nbsp;溢出）将是完美的。
然而，他们确实需要能够在给定段落中对齐图像。
我看不出用现有系统做到这一点的方法 - 有可能吗？
解决方案
您可以在Markdown中嵌入HTML，因此您可以执行以下操作：
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
其他提示
许多Markdown <！> quot; extra <！> quot;处理器支持属性。所以你可以包含一个类名（PHP Markdown Extra）：
{.callout}
或者，（Maruku， Kramdown ， Python Markdown ）：
{: .callout}
然后，当然，您可以正确使用样式表：
.callout {
float: right;
}
如果你的语法支持这种语法，它会为你提供两全其美的效果：没有嵌入式标记，以及足以不需要内容编辑器修改的样式表摘要。
我在纯Markdown 中找到了一个很好的解决方案，其中包含 CSS <！> nbsp; 3 hack ： - ）
当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;
}
嵌入CSS很糟糕：
CSS在另一个文件中：
img[alt=Flowers] { float: right; }
通过使用表格将图像与垂直管道（|）语法对齐，我喜欢超级懒惰。这有一些Markdown风格支持（并且如果漂浮的话，纺织品也支持这种风格）你的船）：
| I am text to the left |  |
或
|  | I am text to the right |
这不是最灵活的解决方案，但它对我的大多数简单需求都有好处，易于以降价格式阅读，而且您不需要记住任何CSS或原始HTML。
我有替代上面使用ALT标记和alt标记上的CSS选择器的方法...而是添加这样的URL哈希：
首先是Markdown图片代码：
请注意添加的网址哈希#center。
现在使用CSS <！> nbsp; 3属性选择器在CSS中添加此规则，以选择具有特定路径的图像。
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
你应该能够使用这样的URL哈希，就像定义一个类名一样，并不像有些人对该解决方案所评论的那样滥用ALT标记。它也不需要任何额外的扩展。做一个左右浮动或你可能想要的任何其他风格。
更简洁的只是将p#given img { float: right }放在样式表中，或者放在<head>中并包含在style标签中。然后，只需使用markdown 。
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
Markdown中的属性markdown可能性。
我喜欢使用这些表的 learnvst的答案，因为它非常易读（这是编写Markdown的一个目的）。
然而，在GitBook的Markdown解析器的情况下，除了空标题行之外，我还必须在其下添加一个分隔线，以便表格被识别并正确呈现：
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
分隔线需要包含至少三个破折号---。
如果您在Python中实现它，可以使用扩展程序来添加HTML键/值对和类/ ID标签。语法是：
{: style="float:right"}
或者，如果嵌入式造型不能漂浮你的船，
{: .floatright}
带有相应的样式表，stylish.css：
.floatright {
float: right;
/* etc. */
}
正如greg 所说你可以在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的细节......这取决于你作为一个web开发人员制作你的CSS内容将页面包装成尽可能通用和干净，但是你的编辑再也不需要了解它。
我有同样的任务，我通过添加以下内容将我的图像对齐：
<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">
最简单的方法是将图像包装在中心标签中，如此......
<center></center>
可以在此处测试与Markdown有关的任何内容 - http://daringfireball.net/projects/markdown/ dingus
当然，<center>可能会被弃用，但它很简单且有效！
