如何将Dash中LEDDisplay组件的显示位置调整至居中？

你可以通过两种方式实现LEDDisplay组件的水平居中：

方法一：修改组件容器的样式 #

将包裹LEDDisplay的Div改为块级元素，并通过自动左右外边距实现居中：

from dash import Dash,html,dcc,Input, Output
import plotly.express as px
import plotly.graph_objects as go
import dash_daq as daq

app = Dash(__name__)  # 补充原代码缺失的初始化语句

app.layout = html.Div([
                        html.H1('Billboard'),
                        dcc.Interval(id='input_place'),

                        html.Div([daq.LEDDisplay(
                                        label="Distance",
                                        labelPosition='top',
                                        value=55.99
                        )],style={'width': '25%', 'display': 'block', 'margin': '0 auto'})
])

if __name__ == '__main__':
    app.run_server(debug=False)

原理：给容器设置固定宽度后，margin: 0 auto会让块级容器在父元素中水平居中。

方法二：给外层容器添加文本居中样式 #

如果希望保留容器的inline-block属性，可以给最外层Div添加text-align: center：

from dash import Dash,html,dcc,Input, Output
import plotly.express as px
import plotly.graph_objects as go
import dash_daq as daq

app = Dash(__name__)

app.layout = html.Div([
                        html.H1('Billboard'),
                        dcc.Interval(id='input_place'),

                        html.Div([daq.LEDDisplay(
                                        label="Distance",
                                        labelPosition='top',
                                        value=55.99
                        )],style={'width': '25%', 'display': 'inline-block', 'padding': '0 0'})
], style={'text-align': 'center'})

if __name__ == '__main__':
    app.run_server(debug=False)

原理：text-align: center会让容器内所有行内/行内块元素自动水平居中。

注意：原代码缺失app = Dash(__name__)初始化语句，运行前需要补充，否则会抛出错误。

内容的提问来源于stack exchange，提问作者Sushil Kokil