0

I am trying to center a image when doing the flask dash app, here is my code:

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__)

app.layout = html.Div([
    dbc.CardImg(src=r'assets/welcome.png', className = 'align-self-center')
    ])

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

but this is not work for me, the image is still on the left not centered.

davidism
  • 121,510
  • 29
  • 395
  • 339
kiritowow
  • 5
  • 2
  • [Does this answer your question?](https://stackoverflow.com/questions/59499025/how-to-center-vertically-and-horizontally-a-heading-text-using-dash-bootstrap) – Undesirable Dec 08 '22 at 19:56
  • no, this is used for center a text, I can do that for sure but image still has the issue – kiritowow Dec 09 '22 at 15:13
  • You've used a flexbox centering mechanism. Please provide more layout context so good answers can be given. – isherwood Dec 09 '22 at 17:38

1 Answers1

0

I figure myself, just add an assets folder under the path and add a .css file input:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

and then call this class in the dash layout:

html.Img(src=r'assets/welcome.png',style={'height': '20%','width': '20%'} ,className = 'center')
kiritowow
  • 5
  • 2
  • Bootstrap provides everything you need to center things. You shouldn't be writing custom styles for this. – isherwood Dec 09 '22 at 17:37