如何使虚线图居中？答案

【问题标题】：How to center a dash graph?如何使虚线图居中？
【发布时间】：2021-04-16 03:01:42
【问题描述】：

我正在尝试使虚线图居中。情节在一个盒子里，即使我改变了高度，尝试使用这个答案来居中元素：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"
                    },
                )

情节布局代码

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)

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

that 中的答案元素将以特殊尺寸居中

如果您想集中任何尺寸的元素，请尝试用您的样式替换以下代码

style={
    "width": "68vh",
    "height": "800px",
    "display": "inline-block",
    "border": "3px #5c5c5c solid",
    "overflow": "hidden",
    "position": "absolute",
    "top": "50%",
    "left": "50%",
    "transform": "translate(-50%, -50%)"
}

注意：您应该将height 68vh 设置为与此示例中的 68% 相同，transform translate 需要此设置

【讨论】：

感谢您的回答，但它对我不起作用。它仍然以某种方式在图形居中时留下空白。

【解决方案2】：

在包含图表的 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"
                        }
                )

【讨论】：