在 Plotly Dash 中居中 dcc.input 字段

Posted 2023-02-18

【中文标题】在 Plotly Dash 中居中 dcc.input 字段

【英文标题】：Centering a dcc.input field in Plotly Dash

【发布时间】：2022-01-15 21:57:16

【问题描述】：

我正在尝试将 dcc.input 文本字段居中放置在屏幕中间，但在此处找到的解决方案：Plotly Dash center dcc.Input text field 和 https://dash.plotly.com/dash-core-components/input 页面已证明可以解决问题。 我的代码是：

dcc.Input(
                id="textsearch",
                placeholder='Write your lyrics here and press ENTER...',
                type='text',
                value=None,
                debounce=True,
                style='width': '20%',"display":"flex", "justifyContent":'center'
                ),

我也尝试了'textAlign':'center'，它适用于输入栏上方的 html.H6 元素。有任何想法吗？请参阅下面的图片以了解我想要发生的事情。

【参考方案1】：

您在错误的组件上应用样式。您需要将其应用到 Input 的父 div。

app.layout = html.Div(
    [
        html.Div(
            children=[
                dcc.Input(
                    id="textsearch",
                    placeholder="Write your lyrics here and press ENTER...",
                    type="text",
                    value="",
                    debounce=True,
                )
            ],
            style="display": "flex", "justifyContent": "center",
        )
    ]
)

此外，如果您希望输入为空，建议将 "" 传递给您。

【讨论】：

非常感谢您，先生，它就像一个魅力。