htmlcssjupyter-notebook

Placing logo with links inline


I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working properly.

<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
  <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab" /, width=150, height=150/>
</a>

<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
  <img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" /, width=150, height=150/>
</a>

What have I tried so far?

  1. I tried to put the logo in a div and then tried to align it to left using css
  2. I tried to place the logo with link in a list

None of them worked! The logos right now looks like this logos

What am I trying to achieve?

I want the logo to be inline separated by space placed from left to right


Solution

  • You can place them inside div with display: flex and disable flex-wrap.

    Also do not set both width and height for your images, it can stretch them without keeping the original ration. Only define one property, see snippet.

    .logo {
      display: flex;
      flex-wrap: none;
      flex-gap: 1em;
    }
    
    /* space between links */
    .logo > a {
      margin-right: 6px;
    }
    
    /* scale your images like this */
    img {
      height: 40px;
    }
    <div class="logo">
      <a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
        <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab">
      </a>
    
      <a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
        <img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" />
      </a>
    </div>