如何在Google Colab中对齐输出（图表）？

Question

是否可以在Google Colab中对齐代码输出？

在Jupyter Notebook中，我使用

from IPython.display import HTML, display

display(HTML("""
<style>
.output {
    display: flex;
    align-items: center;
    text-align: center;
}
</style>
"""))

这会使代码的输出（例如，绘图图）与中心对齐。Google Colab不会引发任何错误，但是它会完全忽略该代码，并且所有内容仍然保持对齐。有人遇到这个问题并解决了吗？

非常感谢！

Answer 1

Colab输出位于其自己的iframe中，因此在一个输出中定义的CSS不会影响其他输出的显示。此外，Colab中单元输出的DOM结构与Jupyter笔记本或JupyterLab中的单元（它们彼此之间略有不同）略有不同。

尝试将此放在同一单元格与要创建的图表：

display(HTML("""
<style>
#output-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
"""))

示例：

from IPython.display import HTML, display

display(HTML("""
<style>
#output-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
"""))

import plotly.express as px
df = px.data.tips()
fig = px.scatter(df, x="total_bill", y="tip",
                width=300, height=300)

fig.show()
fig.show()