Блог

Я хочу центрировать верхний выпадающий список здесь, в синем фоновом блоке:

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
            }),

 

Похоже, вы указали offence_group_dd_2, чтобы занимать 6 столбцов в строке, что, похоже, и происходит. Попробуйте удалить имена классов «шесть столбцов».