Unable to center text in html.Div() inside dbc.Card()

Dash Python
1

Hello,

I’ve built a Dash application, everything is ready and working however, I have been unable to center the heading text. I’ve tries all sorts of aligns in styles but have come up unsuccessful. Would certainly appreciate if anyone could help. Thanks!

Here’s the code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Header Card
header_card = dbc.Card([
    dbc.CardBody(
        html.H1("My Dash Project", style={'align': 'right','justifyContent': 'right'}),
        style={'justifyContent': 'center'}
    )
],
    color='dark',
    inverse=True,
    outline=False,
    style={'align': 'center'}
)

app.layout = html.Div([
    # Header
    dbc.Row([
        dbc.Col(header_card),
    ],
    justify='center'
    )])

if __name__ == '__main__':
    app.run_server(debug=True)
2

I think I found the solution…

I tried the following:
dbc.CardBody([html.Div(
html.H1(“US Bikeshare Statistics”),
style={‘width’: ‘100%’, ‘display’: ‘flex’, ‘align-items’:‘center’, ‘justify-content’:‘center’}
)])

3

A simple solution would be to just use ‘text-center’ as the className.

header_card = dbc.Card([
    dbc.CardBody(
        html.H1("My Dash Project",className='text-center')
    )
],
    color='dark',
    inverse=True,
    outline=False,
)
1 Like
4

Excellent and elegant solution!

Thanks so much!

1 Like