html - GitHub 自述文件中的中心对齐 shield.io

Question

我有一个带有 README.md 文件的 GitHub 存储库。我有一些 shields在我的标题下方，但它们是左对齐的，而不是居中。

<a href="">![example1](https://img.shields.io/badge/example-one-red)</a>
<a href="">![example2](https://img.shields.io/badge/example-two-green)</a>
<a href="">![example3](https://img.shields.io/badge/example-three-blue)</a>

我想让它们居中，但是，将它们包裹在 <div align='center'></div> 中只显示原始链接而不显示屏蔽图像。然后，我看到一个 alternative使用包裹在 <h1 align='center'></h1> 中的 Markdown 引用样式链接，像这样:

[<h1 align="center">
  [![Contributors][contributors-shield]][contributors-url]
  [![Forks][forks-shield]][forks-url]
  [![Stargazers][stars-shield]][stars-url]
</h1>

[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg
[contributors-url]: https://example.com
[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg
[forks-url]: https://example.com
[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg
[stars-url]: https://example.com

虽然这按照我的意愿正确地将盾牌居中对齐，但有一个盗贼打开了 [如下图所示:

如果我修改上面的代码来删除它，像这样:

<h1 align="center">
  [![Contributors][contributors-shield]][contributors-url]
  [![Forks][forks-shield]][forks-url]
  [![Stargazers][stars-shield]][stars-url]
</h1>

我遇到了和以前一样的问题:只显示原始链接，不显示盾牌。这是什么奇怪的行为？我想要实现的目标在 HTML/markdown 中是不可能的，还是只是与防护罩不兼容？

Answer 1

I want to centre them, however, wrapping them in a <div align='center'></div> only displays the raw links and not the shield images.

在 GitHub 的 GFM 中，您将 need to separate your opening and closing <div> tags from your Markdown with blank lines :

<div align="center">

  <a href="">![example1](https://img.shields.io/badge/example-one-red)</a>
  <a href="">![example2](https://img.shields.io/badge/example-two-green)</a>
  <a href="">![example3](https://img.shields.io/badge/example-three-blue)</a>

</div>

这是 because (强调)

[The original Markdown] allows blank lines to occur inside an HTML block. There are two reasons for disallowing them here. First, it removes the need to parse balanced tags, which is expensive and can require backtracking from the end of the document if no matching end tag is found. Second, it provides a very simple and flexible way of including Markdown content inside HTML tags: simply separate the Markdown from the HTML using blank lines

我没有看到类似 [<h1>... 的内容在示例中，您称之为“替代方案”，但请不要 abuse <h1> tags this way :

Using more than one <h1> is allowed by the HTML specification, but is not considered a best practice. Using only one <h1> is beneficial for screenreader users.

语义很重要!只有顶级标题内容属于 <h1>标签，并且每页只能有一个这样的标签。盾牌和徽章绝对不属于那里。