如何在Jupyter Notebook中居中显示.ipynb文件中的图片？

针对你遇到的Colab创建的.ipynb转HTML后图片无法居中的情况，给你几个直接可行的方案：

方案1：在Markdown单元格里用HTML标签包裹图片 #

Jupyter支持在Markdown中内嵌HTML代码，直接用带样式的div包裹你的图片即可：

<div style="text-align: center;">
  ![1new.png](data:image/png;base64,iVBORw0K...u0AAAAASUVORK5CYII=)
</div>

或者直接改用HTML的img标签，效果一致：

<div style="text-align: center;">
  <img src="data:image/png;base64,iVBORw0K...u0AAAAASUVORK5CYII=" alt="1new.png">
</div>

修改后重新转HTML，图片就会居中显示。

方案2：直接修改已生成的HTML文件 #

如果已经转好HTML，不想重新处理ipynb，可以直接编辑HTML文件：

1. 打开生成的HTML文件，找到<head>标签；
2. 在<head>里添加一段自定义CSS：

<style>
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

这样所有图片都会自动居中。如果只想让特定图片居中，可以给目标图片的img标签加class，再写对应样式：

<img class="center-img" src="..." alt="...">

对应的CSS：

.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

方案3：在ipynb中全局设置图片样式 #

在Colab的.ipynb里添加一个代码单元格，运行以下代码，给整个笔记本设置图片居中样式，转HTML时会保留这个设置：

from IPython.display import display, HTML
display(HTML("<style>img { display: block; margin-left: auto; margin-right: auto; }</style>"))

内容的提问来源于stack exchange，提问作者Ege Tunç