Github readme.md align images

Question

I wish the two images on the readme file were vertically aligned, but I don't understand why on Github it is not succeeding.

How can I do it through markup languages?

Result:

<div align="center">
  <div style="display: flex;">
    <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515" style="vertical-align: top;" />
    <img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515" />
  </div>
</div>

Mobina · Accepted Answer · 2020-07-28 10:59:57Z

13

1. You can use a table (it has borders on github):

<table>
  <tr>
    <td valign="top"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/></td>
    <td valign="top"><img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/></td>
  </tr>
</table>

2. You can add align=top to the img tag:

Note: It works as intended on github but not in the snippet

<div>
    <img align=top src="https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
    <img align=top src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
<div>

edited Jul 28, 2020 at 10:59

answered Jul 27, 2020 at 19:00

Mobina

7,1392 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Paul Over a year ago

I don't want them one on top of the other, but next to each other with the smaller image in height starting from the same height position as the other.

Mobina Over a year ago

Sorry I didn't get what you want at first. I've edited my answer, see if it works for you. @Paul

Paul Over a year ago

It seems to work. The problem being a table remains the edge, I tried everything, but the inline css also does not work for security reasons on the part of github. I am looking for a solution.

Mobina Over a year ago

I added another solution. I tested it on github and it works fine. Check it out @Paul

Paul Over a year ago

since I'm changing some things, I have to change the position of the objects again can I ask you for advice?

|

Erica T. · Accepted Answer · 2020-07-27 18:43:24Z

0

You should also add flex-direction:column to the flex div. div style="display: flex; flex-direction: column;"

edited Jul 27, 2020 at 18:43

answered Jul 27, 2020 at 18:28

Erica T.

4503 silver badges10 bronze badges

Comments

S N Sakib · Accepted Answer · 2021-07-25 12:34:54Z

I've achieved this by adding height="200" attribute in the img tag.

But it has a caveat though. GitHub won't let you remove the table border.

<table cellpadding="0">
  <tr style="padding: 0">
    <!-- GitHub Stats Card -->  
    <td valign="top"><img height="200" src="https://github-readme-stats.vercel.app/api?username=snsakib&count_private=true&show_icons=true&theme=tokyonight&hide_border=true&custom_title=My%20GitHub%20Stats"/></td>
    <!-- GitHub Top Language Card -->
    <td valign="top"><img height="200" src="https://github-readme-stats.vercel.app/api/top-langs/?username=snsakib&langs_count=6&layout=compact&theme=tokyonight&hide_border=true&hide=HTML&custom_title=Top%20Languages"/></td>
  </tr>
</table>

Paul Roub · Accepted Answer · 2020-07-27 17:48:54Z

Let flexbox do the work for you. No need for the alignment on the images themselves; use align-items: flex-start on the container to align both images to the top.

<div align="center">
  <div style="display: flex; align-items: flex-start;">
    <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
    <img src="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515" />
  </div>
</div>

It works here, whereas your example above doesn't. Hard to say more without seeing a non-working example using my code.
You can find it in the link above example online, I did just as you indicated.

Collectives™ on Stack Overflow

Github readme.md align images

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Related