Question

我刚升级到IPython 1.0，新的笔记本界面表现非常出色。在我的屏幕上，它现在的默认宽度约为页面的50％，从而提高了可读性。但是，我经常使用长时间系列，我更喜欢尽可能宽地显示。

非常宽的图片只会向右延伸。有没有办法显示输出更宽，然后默认显示为中心事物？

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

enter image description here

Answer 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：将其放在笔记本文件夹中并调用上面的代码

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

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

下载JSON文件HERE from GITHUB

Answer 2

简而言之，您有两种选择。两者都将CSS样式添加到笔记本中以实现效果：

Global Jupyter CSS（影响所有笔记本）修改或创建~/.jupyter/custom/custom.css并添加：
```
.output_png {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
```

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

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

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

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

Answer 3

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

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

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

Answer 4

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

我发现将 output_png 的 CSS 更改为我想要的，而不是更改 jp-RenderedImage 的 CSS。如果这因任何原因而改变或对您有所不同，只需检查元素并选择相关类进行修改。

Answer 5

可以使用 HTML CSS 代码段将 Jupyter Notebook 中的图居中。

下面显示了用于在中心对齐图的代码，通过使用此代码段，所有图都可以在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单元中运行此代码段。

笔记本中的中心输出（图）

5 个答案: