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

Question

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

我试过使用"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 做同样的事情？

标签： cssplotly-dashplotly-python

Answer 1

在通过开发者的 github 搜索后，我发现了这个已关闭的问题，原来您可以使用 Container 的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)