GitHub 自述文件中的 center-align shield.io

Posted 2023-03-28

【中文标题】GitHub 自述文件中的 center-align shield.io

【英文标题】：Centre-align shield.io in GitHub readme file

【发布时间】：2022-01-14 10:59:03

【问题描述】：

我有一个带有 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 使用 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

虽然这可以按照我的意愿正确居中对齐盾牌，但存在如下图所示的无赖打开 [：

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

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

我遇到了和以前一样的问题：只显示原始链接，不显示盾牌。这是什么奇怪的行为？我试图在 html/markdown 中实现的目标是不可能的，还是与屏蔽不兼容？

【参考方案1】：

但是，我想将它们居中，将它们包装在 <div align='center'></div> 中仅显示原始链接，而不显示盾牌图像。

在 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（已添加重点）

[原始 Markdown] 允许在 HTML 块内出现空行。此处不允许使用它们有两个原因。首先，它消除了解析平衡标签的需要，这很昂贵，并且如果没有找到匹配的结束标签，则可能需要从文档末尾回溯。其次，它提供了一种在 HTML 标签中包含 Markdown 内容的非常简单灵活的方法：只需使用空行将 Markdown 与 HTML 分开

在您称为“替代方案”的示例中，我没有看到像 [<h1>... 这样的东西，但是请不要 abuse <h1> tags this way：

HTML 规范允许使用多个<h1>，但这不是最佳做法。只使用一个<h1> 对屏幕阅读器用户很有好处。

语义很重要！只有***标题内容属于<h1> 标签，并且每个页面应该只有一个这样的标签。盾牌和徽章肯定不属于那里。

【讨论】：

您好，非常感谢您的解释。降价中<h1> 的使用取自拉取请求到我链接的仓库：github.com/othneildrew/Best-README-Template/pull/48/commits/…

【参考方案2】：

以下代码应该可以工作。

只需确保在 div 与您的内容之间保持行距。否则，它将不起作用。

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

【讨论】：

我总是喜欢看到旧问题的新答案，如果他们带来新的东西的话。但这似乎只是在重新提出问题时the answer I provided a month ago。它也没有任何参考来解释它的为什么。这告诉我们之前的答案没有告诉我们什么？请阅读How to Answer。