Search code examples
htmlcssgithubvertical-alignment

Read me, gitHub

I was designing my profile in GitHub and i meet some difficulty with HTML in "Readme.md"

<div display=flex; align-items=flex-start; flex-direction=row;>
  <p align="center" >  <img  src="https://www.codewars.com/users/yefimchuk/badges/large" alt="https://www.codewars.com/users/yefimchuk" />

   <p align="center"    > <img src="https://leetcode-stats-six.vercel.app/api?username=KnlnKS&theme=dark" alt="https://github.com/KnlnKS/leetcode-stats" />
   <img  src="https://github-readme-stackoverflow.vercel.app/?userID=17754802&theme=dark" alt="https://stackoverflow.com/users/17754802/yefimchuk" />
</div>

   <p  align="center"> <img src="github-contribution-grid-snake.svg" />
  </div>

It looks so: photo but i wanna that two my block below was aligned by top, like by flex :

<div style="display: flex; flex-direction: row; align-items: flex-start">
  <div>first block</div>
  <div>second block</div>
</div>

but I can't do this in the readMe.md file in GitHub. How I can do this, I try vertical-align: top, but this, still don't work

finally, it's should look like this: https://i.sstatic.net/HS55D.png

Solution

  • GitHub allows HTML in Markdown, but for security, functionality, and accessibility reasons, it strips out much of the formatting from all HTML produced. Therefore, it you have anything that uses a style tag or certain other formatting approaches, they'll be removed.

    If you want to do complex formatting, you should put that on a website, which could be GitHub Pages, and link to it from a simpler README.