Css 将输出（绘图）集中在笔记本中

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

非常宽的图片只会进一步延伸到右侧。是否有一种方法可以将输出显示得比默认值更宽，以便在中心事件中展开

所附图片显示第一个单元格中的正常内联打印，其宽度小于默认笔记本宽度。第二个图更宽，并向右扩展。这使得我的屏幕的左四分之一没有使用

---

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

看一看这本关于你的在线书。这真是太好了

他们使用以下代码在笔记本末尾加载自定义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书籍中下载这个定制CSS：将它放到笔记本文件夹中，并调用上面的代码

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

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

---

下载JSON文件，@tooblippe给出的答案虽然改变了笔记本的样式，但并没有解决这个问题。但是，使用该解决方案的第一部分，您将能够实现绘图的居中。此解决方案适用于

ipython==3.1.0

。对于包含Jupyter的更高版本，您可能希望编辑

Jupyter

的样式

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

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

---

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

全局Jupyter CSS（影响所有笔记本电脑） 编辑或创建

~/.jupyter/custom/custom.css

并添加： .output_png { display: table-cell; text-align: center; vertical-align: middle; } .output_png{ 显示：表格单元格； 文本对齐：居中； 垂直对齐：中间对齐； }

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

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

从IPython.core.display导入HTML
HTML（“”）
.output_png{
显示：表格单元格；
文本对齐：右对齐；
垂直对齐：中间对齐；
}
""")

请注意，在第一种情况下，没有

---

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

垂直对齐：中间对齐对我不起作用。另外，在最新的Jupyter（可能是其他的，但至少是）中有一个名为

.prompt

的类，它只占用页面左侧的空间。我可以使用以下两种方法解决这两个问题：

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

---

只需知道，在

上设置
display:none
。提示符

将导致所有

in[]

和

out[]

显示消失，并且知道如果要执行此操作，这就是您想要的。希望这会有帮助。

通过使用HTML CSS代码片段，Jupyter笔记本中的绘图可以居中

下面显示了在中心对齐绘图的代码，通过使用此代码段，所有绘图都可以在Jupyter笔记本中居中

from IPython.core.display import HTML as Center

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

从IPython.core.display导入HTML作为中心
中心（“”）
.output_png{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
""")

• 确保在“代码”单元中运行此代码段，而不是在“标记”单元中运行

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

---

我发现为

jp renderimage

更改CSS并不是为了

output\u png

，而是为了满足我的需要。如果此更改或因任何原因与您不同，只需检查元素并选择要修改的相关类。

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

jupyter

（4.4.0）尝试了第二个选项，但没有任何更改，绘图仍然是左对齐的，而不是居中的。这个解决方案仍然有效吗？