Search code examples
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>