CODEWITHSUNDEEP
csspython-3.xplotly-dash
Falc
Falc

Reputation: 317

Why isn't this html div element getting centred?

I want to centre the top drop down here within the blue background block:

https://i.sstatic.net/pVJbv.jpg

I've tried a lot of different things including following this guide: https://www.w3schools.com/howto/howto_css_image_center.asp. I've also tried adding a float:center argument, but I cant for the life of me get it to work.

Here is the relevant part of the code I've written: (I want to centre the elements that come under the '# First row of the dropdown menus' section)

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

Upvotes: 1

Views: 98

Answers (1)

ChiralMichael
ChiralMichael

Reputation: 1224

It looks like you specified offence_group_dd_2 to take up 6 columns in the row, which is exactly it appears to be doing. Try removing the "six columns" class names.

Upvotes: 2

Related Questions