为什么这个 html div 元素没有居中？

Question

我想将顶部下拉菜单置于蓝色背景块的中央：

我尝试了很多不同的方法，包括遵循本指南： https://www.w3schools.com/howto/howto_css_image_center.asp。我也试过添加一个 float:center 参数，但我终究无法让它发挥作用。

这是我编写的代码的相关部分：（我想将“# First row of the dropdown menus”部分下的元素居中）

    html.Div([

        # First row of the dropdown menus

        html.Div([

            html.Div([
                dcc.Dropdown(
                        id="court_dd_0",
                        options=[
                            {'label': i, 'value': i} for i in sorted(list(crest['court_name'].unique()))
                            ],
                        value = 'Aylesbury Crown Court',
                        #placeholder='[Placeholder] John Doe',
                            ),
                ], style={'width': '50%', 
                        'display': 'block',
                        'margin-left': 'auto',
                        'margin-right': 'auto',
                        'textAlign': 'center'}, className='six columns'),

            ], className='row'),

        # Second row of the dropdown menus

        html.Div([

            html.Div([
                dcc.Dropdown(
                        id="offence_group_dd_2",
                        options=[
                            {'label': i, 'value': i} for i in sorted(list(df_gb_offences.offence_ho_group_desc_mso.unique()))
                            ],
                        value = None,
                        placeholder='Select breakdown by offence group',
                            ),
                ], style={'padding': 10}, className="six columns"),


            html.Div([
                dcc.Dropdown(
                        id="offence_code_dd_3",
                        options=[
                            {'label': i, 'value': i} for i in sorted(list(crest.offence_ho_code_desc_mso.unique()))
                            ],
                        #value = None,
                        placeholder='Select breakdown by offence',
                            ),
            ], style={'padding': 10}, className="six columns"),

        ], className='row'),

        # Third row of the dropdown menus

        html.Div([


            html.Div([
                    dcc.Slider(
                                id='year_slider_0',
                                min=crest['year'].min(),
                                max=crest['year'].max(),
                                value=crest['year'].max(),
                                marks={str(year): str(year) for year in crest['year'].unique()}
                                ),
                        ], className="twelve columns"), 

            ], style={'padding': 10}, className='row'),

        # End of third row of the drop down menus

        ], style={
            'textAlign': 'center',
            'margin':25,
            'backgroundColor': colors['background'],
            'width': '95%',
            'height': '100%',
            'display': 'inline-block',
            'padding': 10
            }),

Answer 1

您似乎指定了 offence_group_dd_2 在行中占据 6 列，这看起来确实如此。尝试删除 "six columns" class 个名称。

为什么这个 html div 元素没有居中？

Why isn't this html div element getting centred?

css

python-3.x

plotly-dash