CODEWITHSUNDEEP
htmlcssgithubmarkdown
Paul
Paul

Reputation: 4456

Github readme.md align images

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:

enter image description here

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

Upvotes: 7

Views: 13480

Answers (4)

S N Sakib
S N Sakib

Reputation: 1172

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>

Upvotes: 0

Mobina
Mobina

Reputation: 7109

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>

Upvotes: 13

Erica T.
Erica T.

Reputation: 450

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

screen

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36448

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>

Upvotes: -4

Related Questions