Bonjour,

Je poste ce message dans le forum Python car Dash fonctionne avec Python et je ne savais pas dans quel forum poster, désolé si ça n'est pas le bon.
Mon problème est bénin mais embêtant, en haut de mon dashboard, j'aimerais mettre une image de couverture, que j'insère avec ce code :

html.Img(src='assets/image.png', style={"text-align":"center"}),

Le problème est que l'image reste à gauche et n'est pas centrée, alors que le texte l'est parfaitement lorsque j'utilise ce modèle de style, par exemple dans le cas suivant :

        html.H1(
            children="Analyse de la consommation",
            style={"fontSize": "44px", "fontFace": "Arial", "background-color" : "#8C8F91", "text-align":"center"}
            ),

Merci à vous

c'est plutôt du html/css que du python

il faut que ton image soit dans un conteneur (div par exemple) pour utiliser le text-align de ce conteneur

ou encore utiliser margin sur l'image 

cf https://www.codeur.com/tuto/css/centrer-image-css/ 

Bonjour,

Merci pour votre réponse.

Effectivement, mon image est bien dans un conteneur, au même titre que mon titre, mes textes et ma carte plus bas, mais rien n'y fait.

J'ai bien essayé également avec margin, sans succès également. L'exécution du script fonctionne, mais l'image est toujours positionnée à gauche.

Je vous met le début du script, au cas où vous y verriez une erreur :

app.layout = html.Div(
    children=[
        html.Img(src='assets/image.png', style={"text-align":"center", "margin-left": "auto", "margin-right": "auto"}),
        html.H1(
            children="Analyse de la consommation",
            style={"fontSize": "44px", "fontFace": "Arial", "background-color" : "#8C8F91", "text-align":"center"}
            ),
]
...
)

-
Edité par naz113 11 mai 2021 à 22:44:51

le text-align pour l'image est dans la balise image, pas dans un conteneur qui contient l'image (il faut un div qui contient l'image, et mettre dans le style de cette div, le text-align; ça doit donner ça, si j'ai pas fait d'erreur:

app.layout = html.Div(
    children=[
        html.Div(children=
            [html.Img(src='assets/image.png'],
            style={"text-align":"center"}
            ),
        html.H1(
            children="Analyse de la consommation",
            style={"fontSize": "44px", "fontFace": "Arial", "background-color" : "#8C8F91", "text-align":"center"}
            ),
]
...
)