Centre-align shield.io 在 GitHub 自述文件中

Question

我有一个带有 README.md 文件的 GitHub 存储库。我的 header 下面有一些 shields，但它们是 left-aligned，没有居中。

<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 使用 markdown 参考样式链接包裹在 <h1 align='center'></h1> 中，如下所示：

[<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

虽然这正确 centre-aligns 我想要的盾牌，但有一个盗贼打开 [ 如下图所示：

如果我修改上面的代码将其删除，像这样：

<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.

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

Answer 2

下面的代码应该可以工作。

Just Make sure you keep a line gap between the div & your contents. Otherwise, it will not work.

<div align="center">

![YouTube](https://img.shields.io/youtube/channel/subscribers/UCvE1503oOurDjrFw2Mrt-Og?color=%09%23FF0000&logo=youtube&style=for-the-badge)
![Twitter](https://img.shields.io/twitter/follow/iftekhariasif?label=Iftekhar%20I%20Asif&logo=twitter&style=for-the-badge)
![GitHub](https://img.shields.io/github/followers/IftekharIAsif?logo=github&style=for-the-badge)

</div>