在（GitHub）Markdown中围绕图像排列文本

Question

我有一张长而窄的图片，想要在GitHub上的README.md文件的右上方展示它。我已经尝试了几种方法来使其右对齐，目前的代码如下：

<p align="right">
  <img src="doc/subpagelist.png" />
</p>

尽管这种方式可以将图像对齐到右侧，但它相当无用，因为Markdown文件中所有在图像下方的内容都会显示在图像底部而不是左侧。

有没有一种方法可以使文本绕过图像（而不是消除标题和段落）？

- Jeroen De Dauw

Answer 1

在 GitHub Markdown 中，align="right"（或 left）属性可以使用：

<img align="right" src="doc/subpagelist.png">

- Jo Liss

---

但无法与页眉一起使用。我该如何将图像与页眉对齐？ - theonlygusti

@theonlygusti 我认为你最好的选择是 # <img align="center" src="https://github.com/YourCompany/YourProject/blob/master/res/Logo.png"> YourProject，但遗憾的是文本并不真正“居中”。 - Ray

@theonlygusti 如果想在标题旁边放置一张图片，需要将右对齐的图片放在标题之前，并在它们之间留一个空行。 - Jo Liss

在图片后面有办法使用clear: both吗？我使用的图片相当高，它正在渗入到下一个H1部分中。 - Joshua Pinter

你需要使用例如<br clear="right"/>。使用 style="clear: both" 是不起作用的，原因与 style="float: right" 相同：这些style属性会被删除。 - waldyrious

Answer 2

align="left"可以正常工作。要再次打破对齐，请使用<br clear="left"/>（或<br clear="right"/>）标签：

<img src="/path/to/image.png" align="left" width="200px"/>
some text floating around the image

<br clear="left"/>

A "newline". This text doesn't float anymore, is left-aligned.

- Nico Schlömer

---

另外，如果您想要一个干净的边距，只需添加 style="margin:16px;"。 - neoscribe

Answer 3

这个方法对我来说有效（仅适用于jekyll，不适用于Github markdown）： 将以下代码放入您的内容markdown中（我已将其放在第一行以更好地组织）

    <style type="text/css">
    .image-left {
      display: block;
      margin-left: auto;
      margin-right: auto;
      float: right;
    }
    </style>

以下是您的图像：

[![Proguard](./proguard-snippets.png)](http://www.thiengo.com.br/proguard-android){: .image-left } 在这里输入您的文本...

请注意图像URL旁边的.image-left类。

最终结果在此处： 年度电影jekyll github页面

- Richard Lee

---

CSS的代码行应该是“float: left;”而不是“float: right;”，这样才能向左移动吗？ - MethodMan

关于：“仅适用于Jekyll，不适用于Github Markdown”？解释：设置GitPages并查看<user>.github.io/<name>.io，而不是github.com/<user>/<name>.io。 - Erwann

Answer 4

在Markdown中，您可以向标签添加额外的属性。例如，我使用这个来实现您想做的事情：

![Some Title](http://placehold.it/image.jpeg){:style="float: right;margin-right: 7px;margin-top: 7px;"}

- Bert Raeymaekers

---

这似乎无法与 GitHub 风格的 Markdown 兼容。 - kdbanman

这也不适用于我的Azure DevOps私有Git存储库（当然，现在可能在幕后是github.com）。 - bkwdesign

这是因为 GitHub 正在疯狂地删除任何样式。请参阅 https://github.com/github/markup。 - undefined

Answer 5

你所描述的是图像的“浮动”，它允许文本围绕它流动。如果你想了解更多关于CSS中浮动的内容，有number很多好的教程可供学习。同时，在Markdown中使图像浮动，你可以将图像包装在一个div中，并使用以下代码来浮动该div：

<div style="float: right">
    ![Replace this with your image](http://placehold.it/85x85 "Title")
</div>

- Chris

---

div标签仍然存在，但Github会删除其中包含的所有样式信息。 - Shawn South

我在GitHub上没有尝试过，但在Azure DevOps Markdown中它非常好用。 - Kingsley