显示图像jupyter笔记本对齐的中心

Question

我正在使用以下代码在与html转换兼容的Jupyter笔记本中插入图像：

从IPython.display导入图像

图片（文件名=“ picture.jpg”）

除了它保持左对齐而且我需要居中/居中对齐之外，这很好地工作。有什么方法可以将其设置为正确对齐？

Answer 1

您可以将单元格设置为markdown并使用以下内容：

<img src="picture.jpg" width="240" height="240" align="center"/>

然后运行它。

编辑1

或者，您可以使用code带有以下代码的单元格：

from IPython.display import HTML
html1 = '<img src="picture.jpg" width="240" height="240" align="center"/>'
HTML(html1)

Answer 2

这对我有用：

<center><img src="picture.jpg"/></center>

Answer 3

许多浏览器（Chrome、Firefox）仅支持 HTML 5，因此这种语法不再有效，即使在笔记本本身中也是如此。

<img src="picture.jpg" align="center"/>

因为align="center"已被弃用。现在您应该使用 CSS 样式属性和各种边距定义。

<img src="picture.jpg" style="margin-left:auto; margin-right:auto"/>

或者

<img src="picture.jpg" style="margin:auto"/>

有关此问题的更多讨论，请参阅此处。这使得它在笔记本中显示时看起来正确居中。但令人沮丧的是，当您将笔记本导出为 HTML 时，它不起作用（仍然左对齐）。检查生成的 HTML，您会发现它<img>嵌入在<p>元素中，这使整个事情变得混乱。所以你必须添加一个额外的display=block属性，使整个事情

<img src="picture.jpg" style="display=block; margin:auto"/>

这将使图像在笔记本、导出的 HTML 和导出的 Markdown 文件中居中。感谢这些人提供的提示display=block bit。

为了在图像下方获得居中的文本（如图形标题），我输入了一个

<p style="text-align: center">
    <b>Figure N. My Cool Figure</b>
</p>

然后。然后整个设置就是

<img src="picture.jpg" style="display=block; margin:auto"/>
<p style="text-align: center">
    <b>Figure N. My Cool Figure</b>
</p>