How to align README stats side by side in GitHub

Question

I dont know if this is the right place to ask this question but I am really stuck on this part. Basically, I am trying to align my github stats side by side in the readme file.

I added this code in my readme file:


![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)

How can I make it so that the two cards align side by side? Something like this:

Any suggestions?

UPDATE:

I tried adding this but it still did not work:

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

Either `display: flex;` or `float` the elements. Please include your HTML and CSS if you want a relevant solution. — Kameron, Nov 23 '21 at 00:18
Here is a similar question: https://stackoverflow.com/questions/24319505/how-can-one-display-images-side-by-side-in-a-github-readme-md You might find out your answer there. — CleverUser123, Nov 23 '21 at 00:20
I'm almost certain all sorts of styling are filtered out here for reasons of sanitization, so there's probably not a way to do what you want. — bk2204, Nov 23 '21 at 02:19

Kameron · Answer 1 · 2021-11-23T00:53:56.503

1

Please see the CSS I added and changes to your HTML. Simply doing <img align="center" is not enough.

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

Inspected front-end and changed div styles to those suggested and it worked as expected. img

edited Nov 23 '21 at 00:53

answered Nov 23 '21 at 00:33

Kameron

10,240
4
13
26

how would I put the css into the readme file? – Nov 23 '21 at 00:36
You can use inline styles too. See the adjusted. – Kameron Nov 23 '21 at 00:36
hmm doesnt really work – Nov 23 '21 at 00:37
see the edited question with my output – Nov 23 '21 at 00:38
Make sure the new div is nested properly @user2345 add `flex-direction: row;` – Kameron Nov 23 '21 at 00:39
1

it works in preview for some reason but not in my actual page – Nov 23 '21 at 00:39
where do I add that? – Nov 23 '21 at 00:40
in replacement of `display: flex;`? – Nov 23 '21 at 00:40
@user2345 next to the current inline-styles. – Kameron Nov 23 '21 at 00:40
@user2345 check adjusted. – Kameron Nov 23 '21 at 00:40
nope doesnt work still – Nov 23 '21 at 00:41
@user2345 then you're going to have to post more of the surrounding code. Sounds like the div is not nested properly. – Kameron Nov 23 '21 at 00:42
what does class = "img" hold though? – Nov 23 '21 at 00:42
Im gonna post what I have in the question above. See the edited part – Nov 23 '21 at 00:43
@user2345 all you added was what I gave you... how does that help me? I need to see the pre-existing code around it. Do you have the link to the file? – Kameron Nov 23 '21 at 00:44
there is nothing around it though. That is all I have for the github stats – Nov 23 '21 at 00:45
@user2345 shoot me a link to the front-end please. – Kameron Nov 23 '21 at 00:46
do you want me to send u the link to my github? That way u can see what the error is? – Nov 23 '21 at 00:47
https://github.com/hussaino03/hussaino03 – Nov 23 '21 at 00:47
@user2345 check adjusted. – Kameron Nov 23 '21 at 00:54
take a look at the link, I think it will make more sense there – Nov 23 '21 at 00:55
@user2345 looked at link... edited answer shows that the suggested styles worked as expected. see img attached. I can't help anymore without more code or context. Cause the browser is rendering it properly on my end. – Kameron Nov 23 '21 at 00:57

score 1 · Answer 2 · answered Aug 23 '22 at 21:33

This is the solution that worked for me. Both images are about the same size and on the same line.

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

img

Tsvetoslav Tsvetkov · Answer 3 · 2022-06-14T12:21:25.177

The difference in both box sizes annoyed also me. I tried the other proposal here but for some reason it didn't work for me(both in the same size on the same row). So, I did the following that has made them look much better, although they are not on the same line

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

score 0 · Answer 4 · answered Jan 03 '23 at 16:34

Try this below: Using the dir="auto" (which is used for text alignment) along with max-width 100% you should be able to center whatever you want.

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

How to align README stats side by side in GitHub

4 Answers4