How to align two images in two columns in a row?

Dash Python
3

I think the problem that you’re bumping into is that the padding you’re seeing above and below the half-airplane image is coming from inside the SVG canvas that is produced by Dash’s Graph component, rather than from the HTML elements in your page, so no amount of CSS tweaking is going to help align how you want them. As far as the page layout is concerned, your plots are in fact aligned, it’s just that the one on the right has white padding above and below.

If you change the height of the right hand side figure, you’ll see what I mean, as this will reduce the available space to distribute above and below the image:

                    dcc.Graph(
                        id="halfairplane-image",
                        figure=create_image_figure("halfairplane.png").update_layout(
                            height=400
                        ),
                        style={"display": "inlineBlock", "verticalAlign": "top"},
                    )

But that feels like more of a workaround rather than a solution, as it will also change the width of the image at the same time.

Is there a specific reason why’re you’re putting the image in a Graph? If not, I’d suggest using a good old <img> element via Dash’s html.Img component. That way, you’ll be able to style the image directly as you’ve been trying to do without having to worry about the padding generated by the plot. This is how I’d try and get image’s rendering in Dash.

The simplest way to do this is adding your images to an assets folder in your base Dash project directory as described here.

Or you can encode the image in base64 and put that inline in the element as described here.

Also note that when you define CSS styles inline in Dash you need to convert eg inline-block → inlineBlock as I did above.

1 Like