1

I was just updating my profile readme on Github, but i had a issue. I need to align two elements side by side vertically, but, when I tried to use CSS, I just found out that it's impossible to use style attr on Github's Markdown files. So, how can I align two elements side by side, vertically, without CSS? My code:

<details>
    <summary>Minhas Estátisticas no Github</summary>
    <p align="center">
        <img src="https://github-readme-stats.vercel.app/api?locale=pt-br&username=carlos3g&theme=radical&show_icons=true&include_all_commits=true" alt="Estátisticas Gerais" />
    </p>
    <p align="center">
        <img src="https://github-readme-stats.vercel.app/api/top-langs?locale=pt-br&username=carlos3g&theme=radical" alt="Techs utilizadas nos projetos" />
    </p>
</details>

I want align these two p tags

phd
  • 82,685
  • 13
  • 120
  • 165
Carlos Mesquita
  • 13
  • 3

2 Answers2

2

You use p tags which are block element by default if want to make these two images align side by side remove p tags from your code

<details>
    <summary>Minhas Estátisticas no Github</summary>
    <p>
        <img align="left" src="https://github-readme-stats.vercel.app/api?locale=pt-br&username=carlos3g&theme=radical&show_icons=true&include_all_commits=true" alt="Estátisticas Gerais" />

        <img align="right" src="https://github-readme-stats.vercel.app/api/top-langs?locale=pt-br&username=carlos3g&theme=radical" alt="Techs utilizadas nos projetos">
    </p>
</details>

Note: I used the p tag to make more space between the summary title and the details

You can also use tables if want but it's not very useful in this situation. Here a good guide to using tables in markdown

Sameh Ashraf
  • 112
  • 1
  • 2
  • 8
0

Using pipes worked for me in Jupyter, did not check with GitHub though. You can even place images side by side using pipes

| a | b | c |
| - | - | - |
a b c

Markdown Guide

Mohammad Fasha
  • 188
  • 1
  • 9