在 Plotly Dash 中居中 dcc.input 字段答案

【问题标题】：Centering a dcc.input field in Plotly Dash在 Plotly Dash 中居中 dcc.input 字段
【发布时间】：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 元素。有任何想法吗？请参阅下面的图片以了解我想要发生的事情。

【问题讨论】：

标签： python plotly plotly-dash

【解决方案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"},
        )
    ]
)

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

【讨论】：

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