Center embedded Bokeh plot

How can I center an embedded Bokeh plot? My css seems to have no effect on Bokeh's <div class="plotdiv">. In the minimal example below, I want the plot to be at the center of the yellow container.

from jinja2 import Template from bokeh.embed import components from bokeh.models import Range1d from bokeh.plotting import figure from bokeh.resources import INLINE from bokeh.util.browser import view x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7] p1 = figure(plot_width=300, plot_height=300) p1.scatter(x1, y1, size=12, color="red", alpha=0.5) script, div = components(p1) template = Template('''<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bokeh Scatter Plots</title> {{ js_resources }} {{ css_resources }} {{ script }} <style> .wrapper { width: 800px; background-color: yellow; margin: 0 auto; } .plotdiv { margin: 0 auto; } </style> </head> <body> <div class='wrapper'> {{ div }} </div> </body> </html> ''') js_resources = INLINE.render_js() css_resources = INLINE.render_css() filename = 'embed_multiple.html' html = template.render(js_resources=js_resources, css_resources=css_resources, script=script, div=div) with open(filename, 'w') as f: f.write(html) view(filename)

** The filler below is added only to appease SE's robot **

SE's robot wants me to add "more details" because this question is "mostly code." Hey, robot, the question is straightforward, and it's only "mostly code" because I did my homework and try to make it easier for people to help me.


With Bokeh 0.11.1 changing to the following works for me:

.bk-plot-wrapper table { margin: 0 auto; }

The issue is the the div.bk-plot-wrapper takes up all the space of the enclosing <div>. But the internal <table> that lays out the plot doesn't. I'm not a CSS expert, but maybe someone else can add more information

Two notes: I'm not sure what version of Bokeh you have, .plotdiv has not been in use for some time. Also please note that some foundational improvements to layout will be landing in 0.12 to make Bokeh much more respponsive and "webby" by default, and so the above code will probably not work with 0.12 (in particular, the <table> is going away).


<div align="center">put the bokeh plot here</div>

人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:Center embedded Bokeh plot