web-dev-qa-db-fra.com

Comment centrer verticalement et horizontalement un texte d'en-tête à l'aide de dash-bootstrap

J'utilise Bootstrap dash layout pour la mise en page de mon application Web. Mais au lieu d'avoir le texte en haut de la page, je souhaite que le texte soit dans la zone rouge. Comment puis-je y parvenir?

Text in the red area

J'ai essayé d'utiliser "align":"center" and "justify":"center" mais rien n'y fait

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)

Comprenez qu'il existe une solution de contournement en utilisant flask-bootstrap mais comment puis-je faire la même chose en utilisant dash-plotly-booststrap?

cssplotly-dashplotly-python
2
Ralph Deint

Après avoir cherché dans le github des développeurs, j'ai trouvé ceci Problème fermé , Il s'avère que vous pouvez définir la hauteur de la ligne du tiret à l'aide du paramètre style du conteneur et configurer la hauteur à l'aide du className="h-50". La solution ressemble donc à ceci:

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