How to Vertically Center an Image in a Scrollable Dialog Window

[happybeginning1]

Question

I am using the following code to display an image:

with ui.dialog(value=True).style('backdrop-filter:blur(15px) grayscale(30%) contrast(50%);').props('') as dialog:
    with ui.scroll_area().classes('w-full h-full bg-transparent'):
        with ui.card().classes('min-w-full min-h-full').tight():
            ui.image(image_file)

Since this image is dynamically generated, sometimes it's relatively short in length, while at other times, it can be quite long. For longer images, I tried using ui.scroll_area to add a vertical scroll bar to view the full image, which works well.

However, there's a problem. When the image is short, the above code displays the image at the top of the window, which isn't convenient. I tried to center the image vertically within the window but couldn't get it to work. How can I achieve vertical centering for the image? Any help would be greatly appreciated!

[falkoschindler]

Hi @happybeginning1,

Here is a possible solution with a card:

with ui.dialog(value=True):
    with ui.scroll_area().classes('w-full h-full bg-transparent'):
        with ui.card().classes('w-full my-auto').tight():
            ui.image('https://picsum.photos/seed/picsum/800/800')

and without:

with ui.dialog(value=True):
    with ui.scroll_area().classes('w-full h-full bg-transparent'):
        ui.image('https://picsum.photos/seed/picsum/800/800').classes('my-auto')

[happybeginning1]

Thank you @falkoschindler, both approaches work good ^-^