How to add text right next to an Image in Google Colab using HTML?

user_18320654 0
Viewed 339

I am trying to have some text right next to an image in a Google Colab Markdown cell using HTML, but haven't been able to do so.

I took some reference from here but it didn't work for me. The code is this,

<div style="display:inline-block;vertical-align:top;">
<img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
<p>
Here goes the text content.
</p>
</div>

Output -

enter image description here

How can I have it so the text is right beside the image, and I can even change the font size?

You can try your answers by entering them in a Mardown Cell of this notebook.

jupyter-notebook google-colaboratory markdown html python
2 Answers

I would wrap your content (image, text) in a div. The div i would assign to flex. That it...

Update: With inline-style

<div style="display: flex; gap:10px;">
  <img src="https://loremflickr.com/320/240" alt="img"/>
  <p style="font-size: 30px;">
    Here goes the text content.
  </p>
</div>

Update 2: with using float

<div style="display: inline; float: left">
  <img src="https://loremflickr.com/320/240" alt="img"/>
  <p style="float: right; font-size: 30px;">
    Here goes the text content.
  </p>
</div>

Using Table

<table>   
  <tr>     
    <td><img src="https://loremflickr.com/320/240" alt="img"/></td>     
    <td>Txt</td>   
  </tr> 
</table>

user_148071110 
<div style="display:flex;justify-content: space-between;">

    <div style="display:inline-block;vertical-align:top;">
        <img src="https://loremflickr.com/320/240" alt="img" />
    </div>
    <div style="display:inline-block;">
        <p>
            Here goes the text content.
        </p>
    </div>
</div>
user_183838560
Related