笔记本中的中心输出（绘图）答案

【问题标题】：Center output (plots) in the notebook笔记本中的中心输出（绘图）
【发布时间】：2013-08-25 04:01:05
【问题描述】：

我刚刚升级到 IPython 1.0，新的笔记本界面表现非常好。在我的屏幕上，它现在的默认宽度约为页面的 50%，这提高了可读性。但是，我经常处理较长的时间序列，我更喜欢尽可能宽地显示。

非常宽的图片只会向右延伸得更远。有没有办法将输出显示得更宽，然后默认在中心展开？

附图显示了第一个单元格中的正常内联图，其宽度小于默认笔记本宽度。第二个地块更宽并向右扩展。这使我屏幕的左四分之一左右未被使用。

【问题讨论】：

标签： css jupyter-notebook ipython

【解决方案1】：

我做的是以下。这可能会有所帮助，但它也会创建一个渲染精美的笔记本。

看看这本关于Bayesian Statistics 的在线书籍。这真是太好了。

他们使用以下代码在笔记本末尾加载自定义 CSS：

from IPython.core.display import HTML
def css_styling():
    styles = open("custom.css", "r").read() #or edit path to custom.css
    return HTML(styles)
css_styling()

您可以从书籍 github repo HERE 下载此自定义 CSS：将其放入 notebook 文件夹并调用上面的代码

还要注意他们漂亮的 matplotlibrc 文件。您可以更改调用此代码的绘图的外观。在笔记本的早期调用它，所有 matplotlib 绘图都会看起来很酷。

    import json
    s = json.load( open("bmh_matplotlibrc.json") )  #edit path to json file
    matplotlib.rcParams.update(s)

下载JSON文件HERE from GITHUB

【讨论】：

【解决方案2】：

简而言之，您有两种选择。两者都在 notebook 中添加 CSS 样式来实现效果：

全局 Jupyter CSS（影响所有笔记本）编辑或创建~/.jupyter/custom/custom.css 并添加：
.output_png { 显示：表格单元格；文本对齐：居中；垂直对齐：中间； }

通过执行代码单元来修改当前笔记本的样式：

from IPython.core.display import HTML
HTML("""
<style>
.output_png {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>
""")

请注意，在第一种情况下，没有<style></style>。

我更喜欢第二个选项，特别是如果我要共享笔记本（因为它是独立的）。

【讨论】：

我用最新版本的jupyter (4.4.0) 尝试了第二个选项，但没有任何改变，绘图仍然是左对齐而不是居中。这个解决方案还能用吗？
第二个解决方案适用于我，如jupyter-notebook 版本6.0.3。只是一个小建议，最好将text-align: right; 替换为text-align: center; 以完全匹配问题。

【解决方案3】：

@tooblippe 给出的答案，虽然改变了笔记本的风格，但并没有解决问题。但是，使用该解决方案的第一部分，您将能够实现图的居中。此解决方案适用于ipython==3.1.0。对于包含 Jupyter 的更高版本，您可能需要编辑 Jupyter 的样式。

因此，解决方案是：您可以修改上面的 css 文件，也可以将此行添加到 ipython 文件夹中 ipython 环境的样式中：

    .output_png {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

【讨论】：

当前版本的笔记本会缩放图像，使其适合单元格。这使得它现在不那么相关了，但感谢您回答它，很高兴知道。

【解决方案4】：

vertical-align:middle 对我不起作用。此外，在最新的 Jupyter（也许是其他的，但至少）中，有一个名为 .prompt 的类只占用页面左侧的空间。我可以使用这个来解决这两个问题：

.output_png {
    display: table-cell;
    text-align: center;
    margin:auto;
}
.prompt 
    display:none;
}

只要知道在.prompt 上设置display:none 会导致所有in[] 和out[] 显示消失，并且知道这就是你想要的。希望对您有所帮助。

【讨论】：

【解决方案5】：

Jupyter Notebook 中的绘图可以通过使用 HTML CSS 代码片段居中。

在中心对齐绘图的代码如下所示，通过使用此代码片段，所有绘图都可以在 Jupyter Notebook 中居中。

from IPython.core.display import HTML as Center

Center(""" <style>
.output_png {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style> """)

确保您在代码单元中运行此代码片段，而不是在 Markdown 单元中。

【讨论】：

如果从 python 脚本而不是从实际的笔记本执行，这会起作用吗？我正在尝试将它插入我正在开发的 python 包中，但绘图仍然是左对齐的。
没有@Miguel Gonzalez。这只能在 Jupyter 环境中工作，即 Jupyter IDE。这就像使用 Web-Dev sn-ps 重构对齐方式一样，因为 Jupyter IDE 在 Web 浏览器中运行。
哦……真是可怜。无论如何，非常感谢@Kranthi

【解决方案6】：

所有发布的答案（在撰写本文时）似乎都不适用于 Jupyter Lab v3。

我没有为output_png 更改CSS，而是发现为jp-RenderedImage 更改它可以满足我的要求。如果由于任何原因这发生了变化或对您有所不同，只需检查元素并选择相关的类进行修改。

【讨论】：