web-dev-qa-db-ja.com

ダッシュブートストラップを使用して見出しテキストを垂直および水平に中央揃えする方法

Webアプリケーションのレイアウトに Bootstrap dash layout を使用しています。しかし、ページの上部にテキストを置く代わりに、テキストが赤い領域にあることを望みます。どうすればそれを達成できますか？

Text in the red area

"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
2
Ralph Deint

開発者のgithubを検索したところ、これが見つかりました 終了した問題 、コンテナのstyleparameterを使用してダッシュの行の高さを設定し、_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)
_
1
Ralph Deint