Question

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

我尝试了许多不同的操作，包括遵循本指南： 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列，这似乎确实在做。尝试删除“六列”类名称。

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

1 个答案: