在Github Flavored Markdown中如何对齐图片

Question

我在Github仓库中有这些徽章：

如何使它们靠左对齐（上面的两个）并将下面一个靠右对齐？

它们的格式为![描述](URL)

- Rikard

---

你能更清楚地说明你想做什么吗？“左对齐（上面的两个）和右对齐下面的一个”很难理解。 - Chris

@Chris，上面的图片中有3个徽章。顶部有2个，大小相同，下面那个有许多浏览器的大徽章。我想让另一个徽章（有5个浏览器）与其他两个对齐/浮动到右侧。 - Rikard

Answer 1

一种方法是使用html表格（因为GFM中的markdown表格不支持合并单元格）。

例如，这样可以在README.md文件中正确对齐图片。

<table >
  <tr>
    <td align="left"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/add-icon.png"/></td>
    <td align="right"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/info-icon.png"/></td>
  </tr>
  <tr>
    <td colspan="2"><img src="http://icons.iconarchive.com/icons/shwz/disney/512/pumbaa-icon.png"/></td>
  </tr>
</table>

Result:

In your case:

<table>
  <tr >
    <td><img src="https://api.travis-ci.org/axemclion/grunt-saucelabs.png?branch=master"/></td>
    <td align="right"><img src="https://saucelabs.com/buildstatus/grunt-sauce"/></td>
  </tr>
  <tr>
    <td colspan="2"><img src="https://saucelabs.com/browser-matrix/grunt-sauce.svg"/></td>
  </tr>
</table>

这将会得到：

- VonC

---

+1 对于漂亮的图片和能够使用<img>标签的解决方案。但是我仍然无法让它与那些徽章一起工作。__这里有一个类似于我的Markdown示例__。 - Rikard

@Rikard Strange：在我的README.md中似乎可以正常工作：请查看我在扩展和修订答案中使用的标记以显示您的构建状态图片。 - VonC

好的，明白了！显然它不支持Markdown格式：![description](url)，但SauceLabs和Travis也有“老派”的HTML选项。所以，感谢您的回答！ - Rikard

@Rikard 我同意。我先尝试使用Markdown，但无法使其正常工作。我退而求其次使用了HTML。 - VonC