Html Markdown 和图像对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/255170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Markdown and image alignment
提问by Jedidja
I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMDone here in Stack Overflow) would be perfect.
我正在制作一个网站，每个月都会发布一些文章。这很简单，我认为使用 Markdown 编辑器（如Stack Overflow 中的WMD编辑器）将是完美的。
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?
我看不到用当前系统做到这一点的方法 - 有可能吗？
回答by Greg Hewgill
You can embed HTML in Markdown, so you can do something like this:
您可以在 Markdown 中嵌入 HTML，因此您可以执行以下操作：
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
回答by OzzyCzech
I found a nice solution in pure Markdownwith a little CSS 3 hack:-)
我在纯 Markdown 中找到了一个很好的解决方案，并带有一点CSS 3 hack:-)
Follow the CSS 3 code float image on the left or right, when the image altends with <or >.
当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;
}
回答by gerwitz
Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):
许多 Markdown “额外”处理器支持属性。所以你可以像这样包含一个类名（PHP Markdown Extra）：
{.callout}
or, alternatively (Maruku, Kramdown, Python Markdown):
或者，或者（Maruku、Kramdown、Python Markdown）：
{: .callout}
Then, of course, you can use a stylesheet the proper way:
然后，当然，您可以以正确的方式使用样式表：
.callout {
float: right;
}
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.
如果你的支持这种语法，它会给你两全其美的好处：没有嵌入的标记，以及一个足够抽象的样式表，不需要你的内容编辑器修改。
回答by tremor
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:
我有上面使用 ALT 标签和 alt 标签上的 CSS 选择器的方法的替代方法......相反，添加一个像这样的 URL 哈希：
First your Markdown image code:
首先你的 Markdown 图片代码：
Note the added URL hash #center.
请注意添加的 URL 哈希 #center。
Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.
现在使用 CSS 3 属性选择器在 CSS 中添加此规则以选择具有特定路径的图像。
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
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.
您应该能够像定义类名一样使用这样的 URL 哈希，而不是像某些人针对该解决方案评论的那样滥用 ALT 标签。它也不需要任何额外的扩展。为左右浮动或您可能想要的任何其他样式做一个。
回答by tremor
Embedding CSS is bad:
嵌入 CSS 不好：
CSS in another file:
另一个文件中的 CSS：
img[alt=Flowers] { float: right; }
回答by learnvst
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 Textileif that floats your boat):
我喜欢通过使用表格将图像与垂直管道 ( |) 语法对齐来变得非常懒惰。这得到了一些 Markdown 风格的支持（如果它能让你的船漂浮，也得到Textile 的支持）：
| I am text to the left |  |
or
或者
|  | I am text to the right |
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.
它不是最灵活的解决方案，但它适合我的大多数简单需求，易于以 Markdown 格式阅读，并且您不需要记住任何 CSS 或原始 HTML。
回答by ma11hew28
Even cleaner would be to just put p#given img { float: right }in the style sheet, or in the <head>and wrapped in styletags. Then, just use the markdown .
更p#given img { float: right }简洁的方法是将其放入样式表中，或者放入<head>和 包裹在style标签中。然后，只需使用 markdown 。
回答by ma11hew28
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
The attribute markdownpossibility inside Markdown.
markdownMarkdown 中的属性可能性。
回答by jameh
If you implement it in Python, there is an extensionthat lets you add HTML key/value pairs, and class/id labels. The syntax is for this is:
如果您在 Python 中实现它，则有一个扩展可以让您添加 HTML 键/值对和类/id 标签。语法是：
{: style="float:right"}
Or, if embedded styling doesn't float your boat,
或者，如果嵌入式样式不能让您的船漂浮，
{: .floatright}
with a corresponding stylesheet, stylish.css:
带有相应的样式表，stylish.css：
.floatright {
float: right;
/* etc. */
}
回答by icarito
I liked learnvst's answerof using the tables because it is quite readable (which is one purpose of writing Markdown).
我喜欢learnvst使用表格的答案，因为它非常易读（这是编写 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:
但是，在 GitBook 的 Markdown 解析器的情况下，除了一个空的标题行之外，我还必须在其下方添加一个分隔符行，以便识别和正确呈现表格：
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Separator lines need to include at least three dashes ---.
分隔线需要至少包含三个破折号---。
