如何在 GitHub 中并排对齐 README 统计数据

Question

我不知道这是问这个问题的合适地方，但我真的很困惑。基本上，我试图在自述文件中并排对齐我的 github 统计信息。

我在自述文件中添加了此代码：

![User GitHub Stats](https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=radical)
![Top Languages Card](https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=radical&layout=compact)

如何才能使两张卡片并排对齐？像这样的东西：

有什么建议吗？

更新：

我尝试添加这个，但它仍然不起作用：

<img align="center" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />

<div style="display: flex; flex-direction: row;">
 <img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>

Answer 1

请查看我添加的 CSS 以及对 HTML 的更改。仅仅做到

<img align="center"

是不够的。

<div style="display: flex; flex-direction: row;">
 <img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>

检查了前端并将 div 样式更改为建议的样式，并且它按预期工作。

Answer 2

这是对我有用的解决方案。两张图片的大小大致相同，并且在同一条线上。

<div class='container'>
<img style="height: auto; width: 55%;" class="img" src="https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=blue-green" />
&nbsp;
&nbsp;
<img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=blue-green&langs_count=8&layout=compact" /></div>
</div>

Answer 3

两个盒子尺寸的差异也让我很恼火。我在这里尝试了其他建议，但由于某种原因它对我不起作用（同一行的尺寸相同）。因此，我做了以下操作，使它们看起来好多了，尽管它们不在同一条线上

### GitHub Stats
<div><img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api?username=Tsvetoslav88&theme=radical&show_icons=true&include_all_commits=true&hide_border=true" /></div>

### GitHub Languages
<div><img style="height: auto; width: 40%;" class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Tsvetoslav88&theme=radical&langs_count=8&layout=compact&hide_border=true" /></div>

Answer 4

尝试以下操作： 使用 dir="auto" （用于文本对齐）以及 max-width 100%，您应该能够将您想要的任何内容居中。

<div align="center" dir="auto" <img style="max-width: 100%;" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img style="max-width: 100%;" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>

Answer 5

这对我有用：`

`