如何使用 dash-bootstrap 使标题文本垂直和水平居中

Question

我正在使用 Bootstrap dash layout 作为我的 Web 应用程序布局。但我希望文本不会位于页面顶部，而是位于红色区域。我怎样才能实现它？

我试过使用 "align":"center" and "justify":"center" 但没有任何帮助

import dash_bootstrap_components as dbc 
import dash_html_components as html 
import dash

body = dbc.Container([ 
dbc.Row(
            [
            html.H1("test")
            ], justify="center", align="center"
            )
]

)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = html.Div([body])

if __name__ == "__main__":
    app.run_server(debug=True)

了解使用有一些解决方法，但我如何使用 dash-plotly-booststrap 来做同样的事情？

Answer 1

在搜索开发人员的 github 后，我发现了这个 Closed issue，事实证明您可以使用容器的 style 参数设置破折号行的高度并设置使用 className="h-50" 的高度。所以解决方案看起来像这样：

import dash_bootstrap_components as dbc 
import dash_html_components as html 
import dash

body = dbc.Container([ 
dbc.Row(
            [
            html.H1("test")
            ], justify="center", align="center", className="h-50"
            )
],style={"height": "100vh"}

)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = html.Div([body])

if __name__ == "__main__":
    app.run_server(debug=True)

如何使用 dash-bootstrap 使标题文本垂直和水平居中

How to center vertically and horizontally a heading text using dash-bootstrap

css

plotly-dash

plotly-python