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

Question

如何将 html.H1 中的文本居中放置在 python 中？

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

我想把 'Hello Dash' 放在页面的正中间。我该怎么做？

Answer 1

Dash 正在生成 HTML 和 CSS。您可以通过右键单击页面中的标题并使用 'Inspect'.

查看它生成的代码

例如，它把'fontSize'变成了CSS属性'font-size'。定位一行文本的 CSS 属性是 'text-align' (examples)。所以遵循相同的模式，当使用 '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>

请参阅破折号 layout docs（'More about HTML' 部分）

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

How to center a html.H1 in Dash Plotly

python

plotly-dash