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

Question

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

我试过使用 "align":"center"和 "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 后，我找到了这个 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)