How to center a html.H1 in Dash Plotly

user_14873033 0
Viewed 7210

How do I center a text in html.H1 in ploty dash in python?

app = dash.Dash(__name__)
app.layout = html.Div([       
    html.H1('Hello Dash', style={'color': 'red', 'fontSize': 40})
         ])

I want to put 'Hello Dash' right in the middle of the page. How can I do that?

plotly-dash python
1 Answers

Dash is generating HTML and CSS. You can see the code it produced by right clicking on the heading in your page and using 'Inspect'.

As an example, it turned 'fontSize' into CSS property 'font-size'. The CSS property to position a line of text is 'text-align' (examples). So following the same pattern, when using the 'html' method, you could refer to CSS documentation and convert the dash separated properties into camelCase when setting them in the style dictionary. Then dash will convert it back to a CSS property when rendering.

app.layout = html.Div([       
    html.H1('Hello Dash', style={'textAlign': 'center'})
])

Produces this HTML with inline CSS:

<div>
  <h1 style="text-align: center;">Hello Dash</h1>
</div>
user_21986320
Related