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:

image1385×357 14.2 KB

5 posts - 2 participants

Read full topic