4

我有一个与这里类似的问题。我有一个 IPython 笔记本，我希望输出有居中的图。我已经按照上面链接中的说明复制了 css 文件和所有内容，并且，虽然绘图改变了样式，但它们并没有在我的屏幕上居中。

4

1 回答 1

6

这可能来得有点晚，但也许谷歌会让更多的人来这里寻找解决方案。我们可以在 IPython 配置文件的custom.css中设置输出样式并添加以下内容：

使用（较旧的）IPython

.ui-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}

之后，您只需在浏览器中重新加载页面。

-divui-wrapper包含ui-resizable-image 并且可以在其 parent 中对齐output-subarea。margin-left并margin-right设置为auto居中。该关键字!important是避免笔记本覆盖内联样式所必需的。据我所知，使用 !important 并不是最好的事情，但在这里它可以完成工作。

如果您不知道在哪里可以找到 IPython 配置文件，您可以运行以下代码：

%%bash 
ipython locate

通常它位于~/.ipython，其中 ~ 是您的主文件夹。css 文件应该位于~/.ipython/profile_default/static/custom/custom.css并且如果您以前没有使用过它应该是空的。

使用 Jupyter (4.1.0)

自从我的第一篇文章以来，笔记本和文件位置的 HTML 输出发生了变化。但是即使我们不再需要，一般方法也保持不变!important：

查找和/或创建custom.css文件。它应该位于$USER/.jupyter/custom/custom.css*nix 系统上。如果它不存在，请创建它并重新启动您的笔记本服务器。这应该给你一个关于在哪里看的提示：

import jupyter_core
custom_css = jupyter_core.paths.jupyter_config_dir() + '/custom/custom.css'
print "File: %s" % custom_css

在 Windows 上，你必须替换/为\\我猜。

要居中的元素是output_pngdiv 中的图像。

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

这已经通过 Firefox 44.0.2 和 Chrome 49.0 进行了测试。

居中输出

使用 Jupyter 主题

此外，还有一些主题工具。我也没有测试过

我自己，但他们可能会有所帮助。

于 2014-11-27T10:40:59.240 回答