Center output (plots) in the notebook

Question

I just upgraded to IPython 1.0 and the new notebook interface performs really well. On my screen it now has a default width of about 50% of the page which improves readability. However, i often work with long timeseries which i prefer to display as wide as possible.

Very wide pictures will only extend further to the right. Is there a way to display output wider then the default to expand in a centered matter?

The attached picture shows a normal inline plot in the first cell, which is less wide then the default notebook width. The second plot is wider and expands to the right. This leaves about the left quarter of my screen unused.

Answer 1

The answer given by @tooblippe, although changes the style of the notebook, does not address the question. However, using the first part of that solution, you would be able to achieve the centering of the plots. This solution works for ipython==3.1.0. For higher versions that include Jupyter, you would want to edit the styling of Jupyter instead.

So, the solution would be: You can either modify the above css file or add this line to the styling of your ipython environment in the ipython folder:

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

Answer 2

What I do is the following. This might help, but it also creates a beautifully rendered notebook.

Have a look at this online book about Bayesian Statistics. This is really nice.

They load a custom CSS at the end of the notebook using this code:

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()

You can download this custom CSS from the books github repo HERE: Drop it in the notebook folder and call the code above

Also note their nice matplotlibrc file. You can change the look and feel of the plots calling this code. Call this early in the notebook and all matplotlib plots will look pretty cool.

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

Download the JSON file HERE from GITHUB

Answer 3

In short you have two options. Both add CSS styling to the notebook to achieve the effect:

1. Global Jupyter CSS (affects all notebooks) Edit or create ~/.jupyter/custom/custom.css and add:

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

2. Modify the style of the current notebook by executing a code cell with:

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

Note that in the first case there is no <style></style>.

I prefer the second option, specially if I'm going to share the notebook (since its self-contained).

Answer 4

vertical-align:middle did not work for me. Also, in the latest Jupyter (maybe others, but at least) there is a class called .prompt that takes up space only on the left of the page. I was able to work around both using this:

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

Just know that setting display:none on .prompt will cause all of the in[] and out[] displays to disappear and know that's what you want if you're going to do it. Hope that was helpful.

Answer 5

All of the answers posted (at the time of writing) don't appear to work for Jupyter Lab v3.

Instead of changing the CSS for output_png, I've found that changing it for jp-RenderedImage does what I want. If this changes or is different for you for any reason, just inspect the element and choose the relevant class to modify.

Answer 6

The Plots in the Jupyter Notebook can be Centered by Using HTML CSS Code Snippet.

The Code for aligning the plots at center is shown below, by using this Code Snippet all the plots can be centered in the Jupyter Notebook.

from IPython.core.display import HTML as Center

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

• Make Sure you run this Code Snippet in Code Cell, not in Markdown Cell.