0

我有一个带有 README.md 文件的 GitHub 存储库。我的头部下方有一些盾牌，但它们是左对齐的，而不是居中的。

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

但是，我想将它们居中，将它们包装在 a 中<div align='center'></div>仅显示原始链接而不是屏蔽图像。然后，我看到一个使用 markdown 引用样式链接的替代<h1 align='center'></h1>方法，它包含在 a 中，如下所示：

[<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 中实现的目标是不可能的，还是与屏蔽不兼容？

4

2 回答 2

0

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

在 GitHub 的 GFM 中，你需要用空行将你的开始和结束<div>标签与你的 Markdown分开：

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

这是因为（强调）

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

我[<h1>...在您称为“替代品”的示例中看不到任何类似的东西，但请不要以这种方式 滥用<h1>标签：

HTML 规范允许使用多个<h1>，但不被视为最佳实践。仅使用一个<h1>对屏幕阅读器用户有益。

语义计算！只有顶级标题内容属于一个<h1>标签，并且每个页面应该只有一个这样的标签。盾牌和徽章绝对不属于那里。

于 2021-12-09T16:30:05.530 回答
-1

以下代码应该可以工作。

只要确保你在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>
于 2022-01-13T15:14:14.183 回答