我正在制作一个网站，每个月都会在问题中发布文章。这很简单，我认为使用 Markdown 编辑器（如 Stack Overflow 中的WMD编辑器）将是完美的。
但是，他们确实需要在给定段落中使图像右对齐的能力。
我看不到使用当前系统的方法 - 有可能吗？
jedidja
问问题
247039 次
15 回答
240
您可以在 Markdown 中嵌入 HTML，因此您可以执行以下操作：
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
于 2008-10-31T22:47:23.227 回答
84
我在纯 Markdown中找到了一个不错的解决方案，带有一点CSS 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;
}
于 2016-09-21T11:12:28.430 回答
56
许多 Markdown “额外”处理器支持属性。所以你可以像这样包含一个类名（PHP Markdown Extra）：
{.callout}
或者，或者（Maruku、Kramdown、Python Markdown）：
{: .callout}
然后，当然，您可以以正确的方式使用样式表：
.callout {
float: right;
}
如果你的支持这种语法，它会给你两全其美：没有嵌入的标记，以及一个足够抽象的样式表，不需要你的内容编辑器修改。
于 2013-04-29T12:12:45.757 回答
46
对于上面使用 ALT 标记和 alt 标记上的 CSS 选择器的方法，我有一个替代方法......相反，添加这样的 URL 哈希：
首先是您的 Markdown 图像代码：
请注意添加的 URL 哈希 #center。
现在使用 CSS 3 属性选择器在 CSS 中添加此规则以选择具有特定路径的图像。
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
您应该能够像定义类名一样使用这样的 URL 哈希，并且它不是像某些人针对该解决方案所评论的那样滥用 ALT 标记。它也不需要任何额外的扩展。为左右浮动或您可能想要的任何其他样式做一个。
于 2017-04-29T03:22:42.487 回答
27
我喜欢通过使用表格将图像与垂直管道 ( |) 语法对齐来变得超级懒惰。这得到了一些 Markdown 风格的支持（如果你的船漂浮的话，Textile也支持）：
| I am text to the left |  |
或者
|  | I am text to the right |
它不是最灵活的解决方案，但它可以满足我的大部分简单需求，以 markdown 格式易于阅读，并且您不需要记住任何 CSS 或原始 HTML。
于 2013-01-24T18:33:34.690 回答
24
嵌入 CSS 很糟糕：
另一个文件中的 CSS：
img[alt=Flowers] { float: right; }
于 2011-02-19T22:51:48.307 回答
10
更p#given img { float: right }简洁的方法是只放入样式表，或者<head>放入style标签中。然后，只需使用 markdown 。
于 2010-11-14T15:08:03.223 回答
9
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
markdownMarkdown 内部的属性可能性。
于 2009-08-04T15:18:46.853 回答
8
我喜欢learnvst使用表格的答案，因为它非常易读（这是编写 Markdown 的目的之一）。
但是，对于 GitBook 的 Markdown 解析器，除了一个空的标题行之外，我还必须在其下添加一个分隔线，以便识别和正确呈现表格：
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
分隔线需要至少包含三个破折号---。
于 2016-06-03T06:37:34.580 回答
7
如果你在 Python 中实现它，有一个扩展可以让你添加 HTML 键/值对和类/ID 标签。语法是：
{: style="float:right"}
或者，如果嵌入式样式不能让你的船漂浮，
{: .floatright}
带有相应的样式表，stylish.css：
.floatright {
float: right;
/* etc. */
}
于 2013-09-27T00:36:46.857 回答
3
正如 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 内容做更多的事情......（在这种特殊情况下，img用 div 包装标签可以防止其他文本包装在图像上......不过，这只是一个例子），但恕我直言，Markdown的重点是您不希望潜在的非技术人员进入 CSS/HTML 的来龙去脉。作为 Web 开发人员，您可以让包含页面的 CSS 内容尽可能通用和干净，但是随后再次，您的编辑不需要知道这一点。
于 2013-05-04T09:43:27.407 回答
1
我有同样的任务，我通过添加以下内容将图像向右对齐：
<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">
于 2018-02-09T05:26:06.383 回答
0
在警告框中将图像和文本并排对齐，作为单个块中段落的一部分。
<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> → 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>
输出 ：
于 2021-10-28T03:23:52.407 回答
-1
这对我有用
<p align="center">
<img src="/LogoOfficial.png" width="300" >
</p>
于 2020-05-20T19:07:41.200 回答
-16
最简单的是将图像包装在中心标签中，就像这样......
<center></center>
与 Markdown 相关的任何事情都可以在这里进行测试 - http://daringfireball.net/projects/markdown/dingus
当然，<center>可能会被弃用，但它很简单而且有效！
于 2011-12-13T05:58:46.460 回答