1. 使用 Shields.io 生成徽章#

Shields.io 允许通过简单的 URL 生成各种类型的徽章，包括 Docker 相关的统计信息。

可用样式：

• 下载次数： ![Docker Pulls](https://img.shields.io/docker/pulls/你的用户名/镜像名)
• 镜像大小： ![Docker Size](https://img.shields.io/docker/image-size/你的用户名/镜像名)
• Star 数量： ![Docker Stars](https://img.shields.io/docker/stars/你的用户名/镜像名)

注意： 将 你的用户名 和 镜像名 替换为你的 Docker Hub 用户名和镜像名称。

2. 使用 Docker Hub 徽章直接链接#

可以直接使用 Docker Hub 的构建状态徽章。

![Build Status](https://github.com/你的用户名/仓库名/workflows/构建名称/badge.svg)

注意： 将 你的用户名、仓库名 和 构建名称 替换为对应的值。

3. 示例代码及样式调整#

该示例展示了使用 HTML 和 CSS 统一展示多个 Docker Hub 标签。

1
<div style="display: inline-flex; align-items: center; gap: 8px; justify-content: center; width: 100%;">
2
    <a href="https://hub.docker.com/r/hiyuelin/m3u-proxy"><img src="https://img.shields.io/docker/v/hiyuelin/m3u-proxy?style=flat-square&label=version&color=blue" alt="version"></a>
3
    <a href="https://hub.docker.com/r/hiyuelin/m3u-proxy"><img src="https://img.shields.io/docker/pulls/hiyuelin/m3u-proxy?style=flat-square&label=downloads&color=blue" alt="downloads"></a>
4
    <a href="https://hub.docker.com/r/hiyuelin/m3u-proxy"><img src="https://img.shields.io/docker/image-size/hiyuelin/m3u-proxy?style=flat-square&label=size&color=blue" alt="size"></a>
5
</div>

CSS 样式解析：

• display: inline-flex;: 水平排列徽章。
• align-items: center;: 垂直居中对齐徽章。
• gap: 8px;: 设置徽章之间的间距，可以根据需要调整值。
• justify-content: center;: 水平居中align。
• width: 100%;: 让容器宽度适应父级元素，便于水平居中。

徽章样式自定义：

可通过修改 URL 中的参数来改变徽章样式：

• 调整间距： 修改 gap: 值 的值。
• 改变颜色： 修改URL里的 color=颜色值 参数，如 color=green。
• 修改标签： 修改 URL 中的 label=标签文字 参数，如 label=Version。