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

Question

我正在使用Bootstrap dash 布局作为我的 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)

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

Answer 1

在搜索开发人员的 github 后我发现了这个已关闭的问题，事实证明您可以使用容器的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)