Centering output on IPython notebook

问题

I have a similar question to here. I have an IPython notebook, I'd like the output to have centered plots. I've copied the css file and everything as instructed in the above link, and, whilst the plots change style, they don't center on my screen.

回答1:

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

jupyter-themes nor
jupyter-themer

myself but they might be helpful.

来源：https://stackoverflow.com/questions/19782317/centering-output-on-ipython-notebook

标签

ipython

ipython-notebook