如何将虚线图居中？

Question

我正在尝试将虚线图居中。该图位于一个盒子中，即使我更改了高度，也尝试使用以下答案将元素居中：https://stackoverflow.com/a/1725782 但图表仍然显示这样的空白：

这是带来该图的当前代码 我尝试增加高度，但也没有效果。

          html.Div(
                    dcc.Graph(id="backwards", responsive=True),
                    style={
                        "width": "68%",
                        "height": "800px",
                        "display": "inline-block",
                        "border": "3px #5c5c5c solid",
                        "padding-top": "5px",
                        "padding-left": "1px",
                        "overflow": "hidden",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": "-400px"
                    },
                )

plotly布局代码

fig.update_layout(
            height=2000,
            width=870,
            hoverlabel={
                "font": {"family": "monospace"},
            },
            template = "plotly_dark",
            font={"family": "monospace", "size": 18},
            
            margin={
                "pad": 0,
                "t": 0,
                "r": 0,
                "l": 0,
                "b": 0,
            },
        )
        fig.update_traces(showlegend=False)

Answer 1

在包含图表的 div 周围再添加一个 div，就成功了。

html.Div(
                    html.Div(
                        dcc.Graph(
                            id="backwards", 
                            responsive=True,
                            style={
                                "width": "100%",
                                "height": "100%"
                            }
                        ),
                        style={
                            "width": "100%",
                            "height": "100%",
                        },
                    ),
                    style={
                            "width": "68%",
                            "height": "800px",
                            "display": "inline-block",
                            "border": "3px #5c5c5c solid",
                            "padding-top": "5px",
                            "padding-left": "1px",
                            "overflow": "hidden"
                        }
                )

Answer 2

要将图表居中，请使用 'marginLeft': 'auto', 'marginRight': 'auto'。样式字典中的键采用驼峰命名法。因此，它不是 text-align，而是 textAlign，如此处所述。

占据垂直和水平高度 75% 的 dcc 图的布局如下所示：

app.layout = html.Div([
        html.Div(children='Centered graph example:', style={'textAlign': 'center'}),

        dcc.Graph(
            id='example-graph',
            style={'width': '75vh', 'height': '75vh', 'marginLeft': 'auto', 'marginRight': 'auto'},
            figure=fig
        )
    ])