Plotly Dash 中心 dcc.Input 文本字段

Posted 2023-03-05

【中文标题】Plotly Dash 中心 dcc.Input 文本字段

【英文标题】：Plotly Dash center dcc.Input text field

【发布时间】：2019-12-13 11:57:25

【问题描述】：

我很难确定需要哪些样式参数才能将dash_core_components.Input 文本字段置于页面中间。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

text_input_style = 'justify-content': 'center', 'align-items': 'center'
bucket_select = html.Div([
    html.Label('S3 bucket:'),
    dcc.Input(id='bucket_name', placeholder='Enter input here...', 
              value=None, type='text', 
              style='width': '10%', 'textAlign': 'center'),
    html.Div(id='bucket_out')
], style=text_input_style)

app = dash.Dash(__name__)
app.layout = html.Div(bucket_select)
app.run_server(port=5555)

到目前为止我已经尝试过：

'justify-content': 'center' 'align-items': 'center' 'display': 'flex' 'padding-left':'45%'

我尝试在文档中搜索dcc.Input，但找不到任何style 信息。

【参考方案1】：

This is where你可以找到dcc.Input的各种道具。您可以将包含的div 设置为具有display='flex' 和justifyContent='center'。示例：

html.Div(
    children=[dcc.Input()],  # fill out your Input however you need
    style=dict(display='flex', justifyContent='center')
)

【讨论】：

工作，谢谢！看起来我从另一个站点复制/粘贴的 justify-content 是错误的。