Plotly Dash中dbc.Row内多张卡片居中失效问题求助

常见原因及解决方案 #

1. 未使用dbc.Col包裹卡片（最常见） #

Bootstrap的Row布局依赖Col组件实现网格对齐，直接将Card作为Row的子元素时，justify='center'和align='center'可能无法正确生效——Card默认会尽可能占据可用宽度，或者Row无法识别非Col子元素的对齐规则。

修正代码示例：

import dash_bootstrap_components as dbc
from dash import Dash, html

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

app.layout = html.Div([
    dbc.Row(
        [
            # 用Col包裹卡片，设置合适宽度（总列数12，这里3个卡片各占3列）
            dbc.Col(dbc.Card("卡片1", className="m-2"), width=3),
            dbc.Col(dbc.Card("卡片2", className="m-2"), width=3),
            dbc.Col(dbc.Card("卡片3", className="m-2"), width=3)
        ],
        justify='center',
        align='center'
    )
])

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

2. Row或父容器宽度不足 #

如果Row的父容器没有设置为全宽，Row本身的可用空间有限，justify='center'自然无法体现居中效果。需要确保Row及其父容器的宽度为100%。

修正代码示例：

import dash_bootstrap_components as dbc
from dash import Dash, html

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

app.layout = html.Div(
    style={'width': '100%', 'padding': '20px 0'},  # 父容器全宽
    children=[
        dbc.Row(
            [
                dbc.Card("卡片1", style={'width': '18rem'}, className="m-2"),
                dbc.Card("卡片2", style={'width': '18rem'}, className="m-2"),
                dbc.Card("卡片3", style={'width': '18rem'}, className="m-2")
            ],
            justify='center',
            align='center',
            style={'width': '100%'}  # Row自身全宽
        )
    ]
)

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

3. 卡片宽度未限制 #

如果卡片没有设置固定宽度或最大宽度，它会自动拉伸至Row的可用宽度，导致看不到居中效果。给卡片设置style={'width': '18rem'}或类似固定宽度即可解决。

4. 检查dbc版本兼容性 #

旧版本的dash-bootstrap-components可能存在属性bug，建议更新到最新版本：

pip install --upgrade dash-bootstrap-components

内容的提问来源于stack exchange，提问作者DECROMAX