Centering output on IPython notebook

倖福魔咒の 提交于 2019-12-05 16:07:00

This might come a bit late but maybe Google brings more people here looking for a solution. We can style the output in the custom.css in the IPython profile and add the following:

with (older) IPython

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

After that you just have to reload the page in your browser.

The ui-wrapper-div contains the ui-resizable-image and can be aligned in its parent output-subarea. margin-left and margin-right set to auto will center. The keyword !important is necessary to avoid inline style overriding by the notebook. As far as I know, using !important is not the nicest thing to do but here it does the job.

If you don't know where the IPython profile can be found, you can run this code:

%%bash 
ipython locate

Usually it is located at ~/.ipython, where ~ is your home folder. The css file should be located at ~/.ipython/profile_default/static/custom/custom.css and should be empty if you have not used it before.

with Jupyter (4.1.0)

The HTML output of notebooks and file locations have changed since my first post. But the general approach stays the same even though we do not require !important any longer:

Find and/or create a custom.css file. It should be located at $USER/.jupyter/custom/custom.css on *nix systems. If it does not exist, create it and restart your notebook server. This should give you a hint about where to look:

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

On Windows you have to replace / with \\ I guess.

The element to center is the image in the output_png div.

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

This has been tested with Firefox 44.0.2 and Chrome 49.0.

With Jupyter themes

Additionally, there are some theming tools around. I have not tested neither

myself but they might be helpful.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!