Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

horizontalAlign not working for buttons?

I’m trying to align a button to the bottom of a row or at least to the middle. I’ve tried adding a style dictionary at the individual html component, as well as to the entire row, but my button just won’t come down!

This is how it looks:

this is the (relevant part of) code:

app.layout = html.Div([
    # row 1     
    navbar,
    html.Div([
    html.Div([html.Label(["Select Province:", dcc.Dropdown(id='provinces-dropdown',
                                                 options=[{'label': k, 'value': k} for k in municipalities.keys()],
                                                 value='Noord-Holland',
                                                 style = dict(width = '100%'))])], className = "three columns"),
   
    
    html.Div([html.Label(["Select Municipality:", dcc.Dropdown(id='municipalities-dropdown',
                                                               value='Noord-Holland',
                                                               multi = False,
                                                               style = dict(width = '100%'))])], 
            className = "three columns"),
        
        html.Div([html.Button('Retrieve', id='retrieveProjectsBtn')],
                  className = 'three columns',
                  style = dict(horizontalAlign = 'center'))], 
                  className = "row", 
        style = dict(horizontalAlign = 'center')),

Thanks in advance! :slight_smile:

I think you want verticalAlign for this purpose?

I have also tried that!

This works for me (without all your nice styling, but it gets the vertical part right):

    html.Div([
        html.Div([
            html.Label([
                "Select Province:",
                dcc.Dropdown(options=[{'label': k, 'value': k} for k in 'abc'])
            ])
        ], style={'verticalAlign': 'middle', 'width': '200px', 'display': 'inline-block'}),
        html.Div([
            html.Button('Retrieve')
        ], style={'verticalAlign': 'middle', 'display': 'inline'})
    ]),

42%20AM