🏆
Github Profile Trophyを中央寄せで表示させたい
背景
他人の GitHub アカウントのプロフィールを閲覧した際に見かけるGitHub Profile Trophy。
GitHub Profile Trophy は、README の Quick Start にある下記のコードを自身の README.md に埋め込み、username を自身の GitHub ユーザ名に設定すると表示できます。
サンプルコード
[](https://github.com/ryo-ma/github-profile-trophy)
この GitHub Profile Trophy 全体を中央寄せで表示させたいのですが、下記のように html の p タグでそのまま囲うと上手く表示できませんでした。
対応前
<p align="center">
[](https://github.com/ryo-ma/github-profile-trophy)
</p>
対応
対応後
<p align="center">
<a href="https://github.com/ryo-ma/github-profile-trophy">
<img src="https://github-profile-trophy.vercel.app/?username=ryo-ma" />
</a>
</p>
上記のように、リンクの記法を a,img タグで代用すると上手く表示できました。
おまけ
本記事の対応で GitHub Profile Trophy の表示範囲を中央寄せにできました。しかし、トロフィーが 7 個以上あると表示されるトロフィー群の 2 段目以降は左寄せで表示されます。2 段目以降のトロフィー群を中央寄せで表示させることはまだできないみたいです。
この部分をなるべく中央寄せで表示させたい場合は、ユーザ名の後ろに&column=-1を追加すると 1 段で表示されます。
サンプルコード
[](https://github.com/ryo-ma/github-profile-trophy)
Discussion