在 Plotly Dash 中将 dcc.input 字段居中

Question

我正在尝试将 dcc.input 文本字段居中放置在屏幕中间，但是此处找到的解决方案： nor the 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 元素。有任何想法吗？请参阅下图以了解我到底想要发生什么。

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"},
        )
    ]
)

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

在 Plotly Dash 中将 dcc.input 字段居中

Centering a dcc.input field in Plotly Dash

python

plotly

plotly-dash