Plotly Dash，在 dbc.Row 中居中多张卡片

Question

我怎样才能使下面的卡片居中？我已经通过justify='center' & align='center' 它不会产生差异并与左侧对齐？

下面的代码

import dash
from dash import html
import dash_bootstrap_components as dbc

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

"""Change dict values to int for debug / testing"""
standing_card_meta = {
    "Standing": 1200,
    "On-hire": 1000,
    "Off-hire": 800
}

volume_card_meta = {
    "Standing": 1200,
    "On-hire": 1000,
    "Off-hire": 800
}

cost_card_meta = {
    "Standing Scaffolds": 1000,
    "On-hire Scaffolds": 1800,
    "Off-hire Scaffolds": 500
}


def meta_pill(current_val: str, previous_val: str) -> dbc.Badge:
    """Returns badge for meta card values"""

    current_val = int(current_val)
    previous_val = int(previous_val)

    if current_val == previous_val:
        return dbc.Badge("No Change", color='primary', pill=True, class_name='meta_badge')
    elif current_val < previous_val:
        return dbc.Badge(f"{current_val - previous_val}", pill=True, color='success', class_name='meta_badge')
    elif current_val > previous_val:
        return dbc.Badge(f"+{current_val - previous_val}", pill=True, color='danger', class_name='meta_badge')


def meta_card(values: dict, label: str = None, cls_name: str = None) -> list[dbc.CardHeader, dbc.CardBody]:
    """Returns meta cards for layout"""
    card_meta = [
        dbc.CardHeader(label, style={"textAlign": "center"}),
        dbc.CardBody(
            dbc.ListGroup(
                [dbc.ListGroupItem([f"{k}: {v}  ", meta_pill(v, '1000')]) for k, v in values.items()],
                flush=True,
            )
        ),
    ]
    return card_meta


dash_header = html.Div([dbc.Row([html.H3("Analysis Test", style={"textAlign": "center"})]), html.Br()])

dash_cards = html.Div(
    dbc.Row(
        [
            dbc.Col(
                dbc.Card(
                    meta_card(standing_card_meta, label="Standing", cls_name="total_standing_card"),
                    color="primary",
                    outline=True,
                    style={'width': '25rem'}
                )
            ),
            dbc.Col(
                dbc.Card(
                    meta_card(volume_card_meta, label="Volume", cls_name="total_onhire_card"),
                    color="primary",
                    outline=True,
                    style={'width': '25rem'}
                )
            ),
            dbc.Col(
                dbc.Card(
                    meta_card(cost_card_meta, label="Cost", cls_name="total_offhire_card"),
                    color="primary",
                    outline=True,
                    style={'width': '25rem'}
                )
            ),
        ],
        className="mb-4",
        justify='center',
        align='center'
    )
)

standing_drpdown = html.Div

app.layout = html.Div(
    [
        dash_header,
        dash_cards,
    ]
)

if __name__ == "__main__":
    app.run_server(port=8052, debug=True)

谢谢您的帮助！

Answer 1

我看到这个问题来自style={'width': '25rem'}。

所以你只需要删除它然后它就可以工作了。

*注意：我将className="mb-4" 更改为className="p-4"