CODEWITHSUNDEEP
google-colaboratory
Wabiloo
Wabiloo

Reputation: 121

How can I make an image float or right-align in a Google Colab markdown cell?

To explain the process that is going on in my notebook code, I use markdown text boxes between snippets of code. I would like to use small images to illustrate the text (a diagram often makes text clearer).

I cannot find a way of having those images floating on the right however. I tried adding tags with CSS styling, but Colab seems to be removing those. I tried wrapping things in , but again no luck there.

enter image description here

Upvotes: 4

Views: 4675

Answers (2)

Bob Colab
Bob Colab

Reputation: 41

You can also use the now deprecated align attribute on the image tag. https://html.com/attributes/img-align/

Right aligned image

Upvotes: 2

jakevdp
jakevdp

Reputation: 86330

One option is to use an HTML cell with the code hidden, which is triggered by the presence of a form title. For example, create a code cell with this content:

#@title Some Stuff
%%html
Here are some words.
<img src="https://www.w3schools.com/html/smiley.gif"
 style="float:right;width:50px;height:50px;">
Here are some other words and there is an image floating around it.

Then execute the cell & double click on the rendered title to hide the source. The result looks like this: enter image description here

Upvotes: 1

Related Questions