如何在 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 styles 更改為建議的值，它按預期工作。 圖像

Answer 2

兩種盒子尺寸的差異也讓我很惱火。 我在這里嘗試了另一個建議，但由於某種原因，它對我不起作用（在同一行的大小相同）。 所以，我做了以下讓他們看起來好多了，雖然他們不在同一條線上

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

這是對我有用的解決方案。 兩個圖像的大小大致相同，並且在同一行上。

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