Center dropdown menu

I am trying to center dropdown menus, however, they are always left-bound. I tried adding html.Center(), several style options but nothing helped so far. How can I have my Dropdown menues displayed in the middle of the screen instead of floated to the left-hand side?

layout = html.Div([

    dcc.Markdown('---'),

    html.H2('Explorer'),

    dbc.Row([

        dbc.Col([

            html.Div([

                dcc.Dropdown(id='explorer-x', multi=False, options=list_to_dropdown_options(all_columns), placeholder='X-axis', value=None),

                dcc.Dropdown(id='explorer-y', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Y-axis', value=None),

                dcc.Dropdown(id='explorer-color', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Color', value=None),

                dcc.Dropdown(id='explorer-size', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Marker size', value=None),

                dcc.Dropdown(id='explorer-facet-row', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Facet row', value=None),    

                dcc.Dropdown(id='explorer-facet-col', multi=False, options=list_to_dropdown_options(all_columns), placeholder='facet column', value=None),

            ], style={'padding-top': 100, 'margin': 'auto'}, className='center'),

        ], style={'width': 300, 'min-width': 300, 'max-width': 300}),

        dbc.Col([

            dcc.Loading([ 

                html.Div(style={'min-width': 300}),

                dcc.Graph(id="explorer-figure", style={'max-width': '100%'}),  

            ]),

        ])

    ])

])

2 posts - 2 participants

Read full topic