How to center an image in Jupyter Notebook? - Stack Overflow

admin管理员组

文章数量:1125797

I created a text/code .ipynb file in colab. Then to turn it into HTML I opened the file with Jupyter Notebook. After that, I realized that i need to center images that i put in the file. But all tries failed. How can i do that?

The format of the image is:

![1new.png](data:image/png;base64,iVBORw0K...u0AAAAASUVORK5CYII=)

This is my image needs to be centered:

I created a text/code .ipynb file in colab. Then to turn it into HTML I opened the file with Jupyter Notebook. After that, I realized that i need to center images that i put in the file. But all tries failed. How can i do that?

The format of the image is:

![1new.png](data:image/png;base64,iVBORw0K...u0AAAAASUVORK5CYII=)

This is my image needs to be centered:

• image
• jupyter-notebook
• centering

Share Improve this question Follow asked Jan 9 at 3:14 Ege TunçEge Tunç 2144 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

With text you can just wrap it with <center> tags, see here, here, or here.
However, it seems that unlike with text, you cannot wrap markdown-specified images in <center> tags. If you do, they don't render.

Because you can use HTML in Jupyter markdown cells you can, though, just wrap the HTML reference to an image file, with <center>, as covered here. Yet, here in your case, you have Base64 content that you are using and not an image file. So you need to additionally combine the approach spelled out in 'How to display Base64 images in HTML' to address your case.

So for you example that comes together as putting the following in a markdown cell in your Jupyter:

<center><img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /></center>

You'll see a centered red dot.
You should be able to replace the base64 code there with your own content. (Note that is a long line so you'll need to scroll to see/select all of it.)

(The simple Base64 image code used in this demo comes from here.)

That is as opposed to the following self-contained, complete example, based on your provided code:

![a_dot](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==)

That just gives a red dot on the left side. Not centered.

Even finer control of elements is possible with the ability to use HTML in Jupyter cells, too. See here to get an idea.

Additional related resources

• A thorough answer to 'How do I center an image in the README.md file on GitHub?'
• 'Jupyter Notebook position embedded image in markdown'

本文标签： How to center an image in Jupyter NotebookStack Overflow