Markdown 和图像对齐
我正在创建一个每月发布几期文章的网站。 这很简单，我认为使用 Markdown 编辑器（例如 Stack 中的 WMD 编辑器）溢出）就完美了。
但是，他们确实需要能够使图像在给定段落中右对齐。
我看不到在当前系统上做到这一点的方法 - 有可能吗？
I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMD one here in Stack Overflow) would be perfect.
However, they do need the ability to have images right-aligned in a given paragraph.
I can't see a way to do that with the current system - is it possible?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（20）
您可以在 Markdown 中嵌入 HTML，因此您可以执行如下操作：
示例：
You can embed HTML in Markdown, so you can do something like this:
Example:
我在 pure Markdown 中找到了一个很好的解决方案，带有一点 CSS 3 hack :-)
遵循 CSS 3 代码在左侧或右侧浮动图像，当
图像 alt以<或>结尾。I found a nice solution in pure Markdown with a little CSS 3 hack :-)
Follow the CSS 3 code float image on the left or right, when the
image altends with<or>.我有一个替代上述方法的方法，它使用 ALT 标签和 alt 标签上的 CSS 选择器...相反，添加一个 URL 哈希，如下所示：
首先是你的 Markdown 图像代码：
注意添加的 URL 哈希 #center。
现在，使用 CSS 3 属性选择器在 CSS 中添加此规则，以选择具有特定路径的图像。
您应该能够使用像这样的 URL 哈希，就像定义类名一样，并且它不是像某些人对该解决方案评论的那样滥用 ALT 标记。 它也不需要任何额外的扩展。 也可以为左右浮动或您可能想要的任何其他样式做一个。
I have an alternative to the methods above that used the ALT tag and a CSS selector on the alt tag... Instead, add a URL hash like this:
First your Markdown image code:
Note the added URL hash #center.
Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.
You should be able to use a URL hash like this almost like defining a class name and it isn't a misuse of the ALT tag like some people had commented about for that solution. It also won't require any additional extensions. Do one for float right and left as well or any other styles you might want.
许多 Markdown“额外”处理器支持属性。 因此，您可以包含一个类名称，如下所示（PHP Markdown Extra）：
或者（Maruku，Kramdown、Python Markdown)：
那么，当然，你可以以正确的方式使用样式表：
如果您的支持此语法，它将为您提供两全其美的功能：没有嵌入的标记，并且样式表足够抽象，无需内容编辑器进行修改。
Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):
or, alternatively (Maruku, Kramdown, Python Markdown):
Then, of course, you can use a stylesheet the proper way:
If yours supports this syntax, it gives you the best of both worlds: no embedded markup, and a stylesheet abstract enough to not need to be modified by your content editor.
我喜欢通过使用表格将图像与垂直管道 (
|) 语法对齐来变得超级懒。 某些 Markdown 风格支持此功能（如果您的需求浮动，则 Textile 也支持此功能） Boat)：或者
它不是最灵活的解决方案，但它适合我的大多数简单需求，以 Markdown 格式易于阅读，并且您不需要记住任何 CSS 或原始 HTML。
I like to be super lazy by using tables to align images with the vertical pipe (
|) syntax. This is supported by some Markdown flavours (and is also supported by Textile if that floats your boat):or
It is not the most flexible solution, but it is good for most of my simple needs, is easy to read in markdown format, and you don't need to remember any CSS or raw HTML.
嵌入CSS是不好的：
CSS在另一个文件中：
Embedding CSS is bad:
CSS in another file:
Markdown 中的属性
markdown可能性。The attribute
markdownpossibility inside Markdown.更干净的方法是将
p#given img { float: right }放在样式表中，或者放在中，然后用style< /代码> 标签。 然后，只需使用 markdown。Even cleaner would be to just put
p#given img { float: right }in the style sheet, or in the<head>and wrapped instyletags. Then, just use the markdown.如果你用Python实现它，有一个一个扩展可以让你添加HTML键/值对和类/ID 标签。 其语法是：
或者，如果嵌入式样式不能让您满意，
请使用相应的样式表
stylish.css：If you implement it in Python, there is an extension that lets you add HTML key/value pairs, and class/id labels. The syntax is for this is:
Or, if embedded styling doesn't float your boat,
with a corresponding stylesheet,
stylish.css:我喜欢learnvst的答案使用表格，因为它非常可读（这是编写 Markdown 的目的之一）。
然而，对于 GitBook 的 Markdown 解析器，除了空标题行之外，我还必须在其下方添加分隔线，以便识别并正确呈现表格：
分隔线需要包含至少三个破折号
---。I liked learnvst's answer of using the tables because it is quite readable (which is one purpose of writing Markdown).
However, in the case of GitBook's Markdown parser I had to, in addition to an empty header line, add a separator line under it, for the table to be recognized and properly rendered:
Separator lines need to include at least three dashes
---.正如 greg 所说，您可以在 Markdown 中嵌入 HTML 内容，但 Markdown 的要点之一是避免必须有大量的 (或者任何相关的）CSS/HTML 标记知识，对吗？ 这就是我所做的：
在我的 Markdown 文件中，我只是指示所有 wiki 编辑器将所有图像嵌入到如下所示的内容中：（
当然..他们不知道什么
意味着，但这应该不重要）所以 Markdown 文件看起来像这样：
在包裹整个页面的 CSS 内容中，我可以使用图像标签做任何我想做的事情：
当然，您可以使用 CSS 内容做更多事情。 ..（在这种特殊情况下，用 div 包装
img标签可以防止其他文本围绕图像包装...但这只是一个示例），但恕我直言，Markdown 的要点 是，您不希望潜在的非技术人员了解 CSS/HTML 的细节。作为 Web 开发人员，您需要使包装页面的 CSS 内容变得通用且干净，就像可能，但话又说回来，你的编辑不需要知道这一点。As greg said you can embed HTML content in Markdown, but one of the points of Markdown is to avoid having to have extensive (or any, for that matter) CSS/HTML markup knowledge, right? This is what I do:
In my Markdown file I simply instruct all my wiki editors to embed wrap all images with something that looks like this:
(of course.. they don't know what
<div>means, but that shouldn't matter)So the Markdown file looks like this:
And in the CSS content that wraps the whole page I can do whatever I want with the image tag:
Of course you can do more with the CSS content... (in this particular case, wrapping the
imgtag with div prevents other text from wrapping against the image... this is just an example, though), but IMHO the point of Markdown is that you don't want potentially non-technical people getting into the ins and outs of CSS/HTML.. it's up to you as a web developer to make your CSS content that wraps the page as generic and clean as possible, but then again your editors need not know about that.我有同样的任务，我通过添加以下内容将图像向右对齐：
要将图像向左或中心对齐，请替换
为
I had the same task, and I aligned my images to the right by adding this:
For aligning your image to the left or center, replace
with
您可以直接使用align属性：
You can directly use align property:
最好且最可定制的选项：
这会将第一个对齐到左侧，第二个对齐到右侧。 也适用于 2 张以上的图像。
The best and most customizable option:
This will align the first to the left, and the second to the right. Works for more than 2 images too.
查看此 Markdown 图像样式终极指南，了解更多信息 这里
Check this ultimate guide for Markdown image styling for more here
在警告框中将图像和文本并排对齐，作为单个块中段落的一部分。
输出：
Align image and text side-by-side as part of a paragraph in a single block, within a warning box.
Output :
对于仅缩进图像一点的简单方法，只需在
img元素中使用一些不间断空格即可。 例如，For a simple approach to just indenting your image a bit, just use some non-breaking spaces with an
imgelement. E.g.,<img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />我认为最简单的解决方案是直接指定
align="right"：I think the easiest solution is to directly specify
align="right":这对我有用
this work for me
最简单的是将图像包裹在中心标签中，就像这样......
任何与 Markdown 有关的内容都可以在这里测试 - http://daringfireball.net/projects/markdown/dingus
当然，
可能已被弃用，但它很简单而且有效！Simplest is to wrap the image in a center tag, like so ...
Anything to do with Markdown can be tested here - http://daringfireball.net/projects/markdown/dingus
Sure,
<center>may be deprecated, but it's simple and it works!