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

Question

我想在蓝色背景块中将顶部下拉菜单居中：

https://imgur.com/a/BfWxtes

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

这是我编写的代码的相关部分：（我想将“#下拉菜单的第一行”部分下的元素居中）

    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 列，这正是它看起来正在做的事情。尝试删除“六列”类名。