Vertically alignment of html.Div elements

Hi,

I have the following simplified layout and my target is to have all the elements of the first Div vertically aligned.

import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
    html.H1('Evolution of World'),
    html.Div([
        html.Div([
            html.Div(children='Select'),
            dcc.Dropdown(
                id='drop_world',
                options={'label': 'America', 'value': 'America'},
                multi=True,
                value=''
            )
        ], style={'display': 'inline-block', 'width': '20%', 'border': '2px green solid'}),
        html.Div([
            html.Div(children='Select'),
            dcc.Dropdown(
                id='drop_area',
                options={'label': 'US', 'value': 'US'},  # List of {'label': , 'value': }
                multi=True,
                value=''
            )
        ], style={'display': 'inline-block', 'width': '20%', 'margin-left': '15px', 'border': '2px green solid'}),
        html.Div([
            html.Div(children='Select Start and End Date'),
            dcc.DatePickerRange(
                id='date-picker-range',
                display_format='DD/MM/YY',
                first_day_of_week=1,
            )
        ], style={'display': 'inline-block', 'width': '20%', 'margin-left': '15px', 'border': '2px green solid'}),
        html.Div([
            html.Div(children='See'),
            html.Button('See Button', id='but-see', n_clicks=0, style={'verticalAlign': 'middle'}),
        ], style={'display': 'inline-block', 'margin-left': '15px', 'verticalAlign': 'middle', 'border': '2px green solid'}),
    ]),
    html.P(),
    html.Div([
        html.Div(children='Results'),
        dcc.Graph(id='my_graph',
                  figure={'data': [{'x': [1, 2], 'y': [3, 1]}],
                          'layout': {'title': 'Default Title'}
                          })
    ])
])

if __name__ == '__main__':
    app.run_server()

However, the datepickerrange and the button are a bit higher:

Hi @thleo

I think some components have different margins defined.
To solve this I add styles to those components (one by one).

Style={‘margin-top’:10}

But I think that will align Horizontaly :thinking: :woozy_face: :grinning:

Hi @Eduardo,

I did changed the style to all the 4 Div elements to:

style={'display': 'inline-block', 'width': '20%', 'border': '2px green solid', 'margin-top': '10'}

but still it didn’t change anything.

Hey @thleo

Margin-top will add spaces into the top margin of your component.
You only need to change the components margins that are not aligned.
In this case the date picker and the button.
Also 10 is a value reference, you may need to adjust the number of spaces manually, in one case perhaps you need 10 or 12 or 20 and in the other just 6 ot anything. Try any number until the component is aligned with the others.

1 Like

OK, yes it worked like that. Thank you for the help.

In the end, I tried only 'verticalAlign': 'top' to all the 4 elements and it worked better.

2 Likes

Hey @thleo ,
i spent some time styling mine in a similar fashion if it helps. The different size box was annoying me as well.