Horizontally center image

Dash Python
1

Tell me how to make the image horizontally centered?

Source

2

You need to set the css style property for the Div which contains your image.
https://www.w3schools.com/howto/howto_css_image_center.asp

3

:point_down:This could center the image without using css.

import dash
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
        html.Img(
            src='static/logo.png',
            style={
                'height': '50%',
                'width': '50%'
            })
], style={'textAlign': 'center'})
1 Like
4

Why do you call it textAlign and not text-align?

5

That is a HTML format. The following explanation explains well the difference; html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}) is rendered in the Dash application as <h1 style="text-align: center; color: #7FDBFF">Hello Dash</h1> .

There are a few important differences between the dash_html_components and the HTML attributes:

  1. The style property in HTML is a semicolon-separated string. In Dash, you can just supply a dictionary.
  2. The keys in the style dictionary are camelCased. So, instead of text-align , it’s textAlign .
1 Like