如何在 Dash Plotly 中将 html.H1 居中

Question

如何在Python中的ploty dash中将html.H1中的文本居中？

app = dash.Dash(__name__)
app.layout = html.Div([       
    html.H1('Hello Dash', style={'color': 'red', 'fontSize': 40})
         ])

我想将“Hello Dash”放在页面中间。我怎样才能做到这一点？

Answer 1

Dash 正在生成 HTML 和 CSS。您可以通过右键单击页面标题并使用“检查”来查看它生成的代码。

例如，它将“fontSize”转换为 CSS 属性“font-size”。用于定位一行文本的 CSS 属性是“text-align”（示例）。因此，按照相同的模式，当使用 'html' 方法时，您可以参考 CSS 文档，并在样式字典中设置它们时将破折号分隔的属性转换为驼峰命名法。然后在渲染时，dash 会将其转换回 CSS 属性。

app.layout = html.Div([       
    html.H1('Hello Dash', style={'textAlign': 'center'})
])

使用内联 CSS 生成此 HTML：

<div>
  <h1 style="text-align: center;">Hello Dash</h1>
</div>

• 请参阅破折号布局文档（“有关 HTML 的更多信息”部分）