Markdown 和图像对齐
Posted
技术标签:
【中文标题】Markdown 和图像对齐【英文标题】：Markdown and image alignment 【发布时间】：2010-09-20 06:56:15 【问题描述】：我正在创建一个网站，每个月都会发布文章。这很简单，我认为使用 Markdown 编辑器（如 *** 中的 WMD 编辑器）会很完美。
但是，他们确实需要在给定段落中使图像右对齐。
我看不出用当前系统的方法 - 有可能吗？
【问题讨论】：
为什么不直接问这个问题而没有“我在帮助一个朋友，这个网站每个月都会发布文章的非盈利网站”？ @JGallardo 因为我想明确表示我无法完全控制系统，也没有能力购买任何类型的解决方案。我同意我可以用不同的方式来表达这个问题。 关于markdown编辑器，你可以使用伟大的stackedit.io/editor#，写在里面太棒了:) @AbdelHady 如果它在 2008 年可用 :) @iPython 2008 年的问题怎么可能与 4 年后（2012 年）提出的问题重复？ 【参考方案1】：你可以在 Markdown 中嵌入 html，所以你可以这样做：
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
【讨论】：
通过剥离不必要的div 并分别在img 标签上添加一个右斜杠来清理和标准化，即`
而不是div，我更喜欢使用span 进行内联缩进。对于整段居中div 很好，甚至是简单的p。
这更适用于一些经过消毒的解释器，比如 GitHub 的解释器：
@MattDiPasquale 不需要斜杠。那是 XHTML，不是 HTML。
我尝试将图像嵌入到幽灵博客文章中；使用 正确地围绕图像流动以下段落，而 放置段落和图像在并排的盒子里。【参考方案2】：
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
Markdown 中的属性markdown 可能性。
【讨论】：
对我有用。我没有使用 github。谢谢@raphox。 与michelf's vanilla markdown php 解析器一起工作正常 这是 Markdown Extra 功能，包含在某些内容管理系统（例如 Drupal）中，但不包含在 Markdown 本身中。【参考方案3】：更简洁的方法是将p#given img float: right 放在样式表中，或者放在<head> 中并用style 标签包裹。然后，只需使用降价 。
【讨论】：
【参考方案4】：嵌入 CSS 不好：
另一个文件中的 CSS：
img[alt=Flowers] float: right;
【讨论】：
什么？现在突然每次更改降价内容时都必须编辑外部文件？对我来说这听起来不是一个好的解决方案。 @JordanReiter 这里的每个人都编写了一个由多个文件组成的程序，其中逻辑分布/组织在许多位置。我们这样做是为了可维护性。为什么这会如此痛苦和可怕的不同？ Markdown 允许非程序员用户创建内容，它不应该依赖于必须在服务器上直接访问和编辑的文件。另一个例子：我认为将数据库中字段的 names 硬编码到代码中是完全正常的，但基于字段的 value 进行硬编码是错误的在您的数据库中（即if product.name == 'Tulips'），因为您不能依赖值的稳定性。只需有人将Flowers 更改为Flower，然后该图像就会突然出现在视野之外。此外，他们每次添加图片时都必须给您打电话！
@cboettig 这是对 alt 标签的严重滥用。它应该是图片的文字描述，供看不到图片的人使用。
我很惊讶有这么多人为这个解决方案哭泣。这是一个漂亮的技巧，对于解决某些托管服务的问题是必要的。给这个漂亮的 hack 的海报现在不见了，取而代之的是社区留下了哭泣的孩子。【参考方案5】：
最简单的就是将图片包裹在一个中心标签中，像这样......
<center></center>
任何与 Markdown 相关的东西都可以在这里测试 - http://daringfireball.net/projects/markdown/dingus
当然，<center> 可能已被弃用，但它很简单而且有效！
【讨论】：
刚刚注意到 OP 要求右对齐——当我偶然发现这个答案时，我正试图将图像居中。 我实际上将支持@yoyo——<center> 确实有道理。它已从 HTML 中弃用，因为 HTML 应该只描述内容；样式应该在样式表中。然而，Markdown 有不同的意图：包含足够的样式来传达文本消息，并将其余的留给渲染器/站点。 <center> 似乎比考虑 CSS 要自然得多 widths、floats、margins ……我什至会用 Markdown 解析器替换 <center> 适当的支持 CSS 的标签元素，就像它目前如何智能地找出段落一样。【参考方案6】：
我喜欢通过使用表格将图像与垂直管道 (|) 语法对齐来变得超级懒惰。这得到了一些 Markdown 风格的支持（如果你喜欢的话，Textile 也支持）：
| I am text to the left |  |
或
|  | I am text to the right |
它不是最灵活的解决方案，但它可以满足我的大部分简单需求，以 markdown 格式易于阅读，并且您无需记住任何 CSS 或原始 HTML。
【讨论】：
我喜欢这种风格，非常markdown-y。太糟糕了，它在 github 上不起作用（反正还没有。） 我刚刚在 GitHub 上尝试过这种语法，现在似乎可以使用了。 这是一个有趣的 hack，但它滥用表格进行布局。欢迎来到 1999 年。 对于 github 风格的降价，添加一行|-|-|。它告诉解析器有一个表，第一行是一个表头。例如：goo.gl/xUCRiK【参考方案7】：
许多 Markdown “额外”处理器支持属性。所以你可以像这样包含一个类名（PHP Markdown Extra）：
.callout
或者，或者（Maruku，Kramdown，Python Markdown）：
: .callout
然后，当然，您可以正确使用样式表：
.callout
float: right;
如果您的支持这种语法，它可以为您提供两全其美的优势：没有嵌入式标记，并且样式表抽象到足以不需要您的内容编辑器进行修改。
【讨论】：
当你写完所有这些时：!Flowers: .callout 你可能已经写了 我同意，但 Markdown 经常被用于不具备 *ML 知识的用户，因此没有理由更喜欢 HTML 而非任何其他任意语法。 (“No reason”当然是过于简单化了。您可能希望您的编辑器离最终的 HTML 渲染更近或更远的用户体验原因有很多。或者您可能不愿意引入如果您选择 Markdown 来抽象呈现技术，则内容中的 HTML 依赖关系。）【参考方案8】：作为 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 的来龙去脉。作为 Web 开发人员，您可以自己制作 CSS 内容将页面包装得尽可能通用和干净，但您的编辑也不需要知道这一点。
【讨论】：
【参考方案9】：如果您在 Python 中实现它，an extension 可以让您添加 HTML 键/值对和类/ID 标签。语法是这样的：
: style="float:right"
或者，如果嵌入式样式不能让您的船漂浮，
: .floatright
带有相应的样式表，stylish.css:
.floatright
float: right;
/* etc. */
【讨论】：
【参考方案10】：我喜欢 learnvst's answer 使用这些表格，因为它非常易读（这是编写 Markdown 的目的之一）。
但是，对于 GitBook 的 Markdown 解析器，除了一个空的标题行之外，我还必须在其下方添加一个分隔线，以便识别和正确呈现表格：
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
分隔线需要至少包含三个破折号---。
【讨论】：
【参考方案11】：我在 pure 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;
【讨论】：
CSS应该放在MkDocs目录的什么位置？ @YannDuran @IvanHuang 只需确保根据 MkDocs 文档添加一个 extra.css 文件，并将 css 放入该文件中。【参考方案12】：对于上面使用 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 标记。它也不需要任何额外的扩展。为左右浮动或您可能想要的任何其他样式做一个。
【讨论】：
正是我想要的。你是生命的救星。我想补充的一件事是 ``` h1 h2 clear: both ``` 这样下一个标题就从新行开始（不与图像重叠） 看起来像我要找的东西，但是......我如何制作 CSS？以及如何在 Markdown 中调用它？ 这也是和我一样的好解决方案 :) @OzzyCzech - 并非如此，您的解决方案滥用了图像“alt”标签，这可能不利于页面上的可访问性合规性，该解决方案通过 src 标签使用非入侵方法。 谢谢，但是如何将所有图像更改为中心（使用单个 CSS 文件）？【参考方案13】：我有同样的任务，我通过添加以下内容将图像向右对齐：
<div style="text-align: right"><img src="/default/image/sms.png" /></div>
为了使您的图像向左或居中对齐，请替换
<div style="text-align: right">
与
<div style="text-align: center">
<div style="text-align: left">
【讨论】：
我试过了，但它现在可以工作了。图像已对齐，但 html 文本显示。【参考方案14】：这对我有用
<p align="center">
<img src="/LogoOfficial.png" >
</p>
【讨论】：
【参考方案15】：在警告框中将图像和文本作为段落的一部分并排对齐。
<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>
输出：
【讨论】：
以上是关于Markdown 和图像对齐的主要内容，如果未能解决你的问题，请参考以下文章