在 Plotly 中将 dcc.input 字段居中

Question

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

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 元素。 有任何想法吗？ 请参阅下面的图片以了解我想要发生的事情。

Answer 1

您在错误的组件上应用样式。 您需要将其应用于您的输入的父 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"},
        )
    ]
)

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