Markdown 和图像对齐答案

【问题标题】：Markdown and image alignmentMarkdown 和图像对齐
【发布时间】：2010-09-20 06:56:15
【问题描述】：

我正在创建一个网站，每个月都会发布文章。这很简单，我认为使用 Markdown 编辑器（如 StackOverflow 中的 WMD 编辑器）会很完美。

但是，他们确实需要在给定段落中使图像右对齐。

我看不出用当前系统的方法 - 有可能吗？

【问题讨论】：

为什么不直接问这个问题而没有“我在帮助一个朋友，这个网站每个月都会发布文章的非盈利网站”？
@JGallardo 因为我想明确表示我无法完全控制系统，也没有能力购买任何类型的解决方案。我同意我可以用不同的方式来表达这个问题。
关于markdown编辑器，你可以使用伟大的stackedit.io/editor#，写在里面太棒了:)
@AbdelHady 如果它在 2008 年可用 :)
@iPython 2008 年的问题怎么可能与 4 年后（2012 年）提出的问题重复？

标签： html css markdown

【解决方案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">
    ![book](/images/book01.jpg)
</div>

Markdown 中的属性markdown 可能性。

【讨论】：

对我有用。我没有使用 github。谢谢@raphox。
与michelf's vanilla markdown PHP 解析器一起工作正常
这是 Markdown Extra 功能，包含在某些内容管理系统（例如 Drupal）中，但不包含在 Markdown 本身中。

【解决方案3】：

更简洁的方法是将p#given img { float: right } 放在样式表中，或者放在<head> 中并用style 标签包裹。然后，只需使用降价 ![Alt text](/path/to/img.jpg)。

【讨论】：

【解决方案4】：

嵌入 CSS 不好：

![Flowers](/flowers.jpeg)

另一个文件中的 CSS：

img[alt=Flowers] { float: right; }

【讨论】：

什么？现在突然每次更改降价内容时都必须编辑外部文件？对我来说这听起来不是一个好的解决方案。
@JordanReiter 这里的每个人都编写了一个由多个文件组成的程序，其中逻辑分布/组织在许多位置。我们这样做是为了可维护性。为什么这会如此痛苦和可怕的不同？
Markdown 允许非程序员用户创建内容，它不应该依赖于必须在服务器上直接访问和编辑的文件。另一个例子：我认为将数据库中字段的 names 硬编码到代码中是完全正常的，但基于字段的 value 进行硬编码是错误的在您的数据库中（即if product.name == 'Tulips'），因为您不能依赖值的稳定性。只需有人将Flowers 更改为Flower，然后该图像就会突然出现在视野之外。此外，他们每次添加图片时都必须给您打电话！
@cboettig 这是对 alt 标签的严重滥用。它应该是图片的文字描述，供看不到图片的人使用。
我很惊讶有这么多人为这个解决方案哭泣。这是一个漂亮的技巧，对于解决某些托管服务的问题是必要的。给这个漂亮的 hack 的海报现在不见了，取而代之的是社区留下了哭泣的孩子。

【解决方案5】：

最简单的就是将图片包裹在一个中心标签中，像这样......

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</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  | ![Flowers](/flowers.jpeg) |

或

| ![Flowers](/flowers.jpeg) | I am text to the right |

它不是最灵活的解决方案，但它可以满足我的大部分简单需求，以 markdown 格式易于阅读，并且您无需记住任何 CSS 或原始 HTML。

【讨论】：

我喜欢这种风格，非常markdown-y。太糟糕了，它在 github 上不起作用（反正还没有。）
我刚刚在 GitHub 上尝试过这种语法，现在似乎可以使用了。
这是一个有趣的 hack，但它滥用表格进行布局。欢迎来到 1999 年。
对于 github 风格的降价，添加一行 |-|-|。它告诉解析器有一个表，第一行是一个表头。例如：goo.gl/xUCRiK

【解决方案7】：

许多 Markdown “额外”处理器支持属性。所以你可以像这样包含一个类名（PHP Markdown Extra）：

![Flowers](/flowers.jpeg){.callout}

或者，或者（Maruku，Kramdown，Python Markdown）：

![Flowers](/flowers.jpeg){: .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 标签。语法是这样的：

![A picture of a cat](cat.png){: style="float:right"}

或者，如果嵌入式样式不能让您的船漂浮，

![A picture of a cat](cat.png){: .floatright}

带有相应的样式表，stylish.css:

.floatright {
    float: right;
    /* etc. */
}

【讨论】：

【解决方案10】：

我喜欢 learnvst's answer 使用这些表格，因为它非常易读（这是编写 Markdown 的目的之一）。

但是，对于 GitBook 的 Markdown 解析器，除了一个空的标题行之外，我还必须在其下方添加一个分隔线，以便识别和正确呈现表格：

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

分隔线需要至少包含三个破折号---。

【讨论】：

【解决方案11】：

我在 pure Markdown 中找到了一个不错的解决方案，带有一点 CSS 3 hack :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

当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 图片代码：

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

注意添加的 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" width="100" /></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" width="300" >
</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>  &rarr;  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>

输出：

【讨论】：