Content in dbc.Card is not centered inside dbc.Col

Dash Python
1

Here is a part of my code

dropdown = html.Div(
    [
        *create_fly_conditions()
    ],
    className="mb-4"

)

controls = dbc.Card(
    [dropdown],
    body=True,
)

chart = dbc.Card(
    dbc.Col([
        html.Img(
            src='assets/result_1195325-vms-pd-14.png',
            style={'maxWidth': '100%'},
        ),
        dcc.Graph(
            id="line-chart",
            figure=px.line(template="bootstrap")
        )
    ],
        width=6,
    ),
    body=True,
    style={
        "display": "flex",
        "justify-content": "center",

    }
)

app.layout = dbc.Container(
    [
        dbc.Row([
            dbc.Col([
                controls,
                theme_controls
            ], width=3),
            dbc.Col(chart, width=9),
        ]),
    ],
    fluid=True,
    className="dbc dbc-ag-grid",
    style={'margin-top': '20px'}
)

Why the Col inside chart appears left-aligned instead of being centered?

2

Maybe you can try “justifyContent”: “center” and MarginTop. (but that’s not your problem). It’s almost as css but not exactly.