How to align logo with webapp header in dash?

Hi!
I am new to dash and python in general. I am trying to add a logo to my WebApp so that the logo is on the top right of the page aligned with the webapp title which should be centered.

This is what I want to get

I am using this code:

app.layout =  html.Div(children=
                         [html.H1(children = ['Tweet Performance Dashboard'],
                                style = {'font-family':'Calibri', 'color':'#3A6BAC','textAlign':'center',
                                        'display':'inline-block'}),
                          html.Img(src="path/logo.png")])

But I get this view in which basically both title and logo move to the top left

I also tried the below, but still, didn’t work

app.layout =  html.Div(children=
                         [html.H1(children = ['Tweet Performance Dashboard'],
                                style = {'font-family':'Calibri', 'color':'#3A6BAC','textAlign':'center',
                                        'display':'inline-block'}),
                          html.Img(src="path/logo.png",style={'display':'inline-block'})])

Does anyone have an idea on what could be the reason?

Thanks

1 post - 1 participant

Read full topic