Aligning Image and text to be centered on the vertical axis

[yosi199]

I'm trying to align the image and the text around the center anchor (on the vertical axis), how do I achieve this?

code for reference:

import { AppTheme } from "../theme.slint";
import { HorizontalBox, VerticalBox } from "std-widgets.slint";

export component MainWindowHeader { // Remove Window inheritance
in property header-background: AppTheme.background;

Rectangle {
    width: parent.width;
    height: parent.height;
    background: header-background;

    VerticalBox {
        padding: 0px;
        HorizontalBox {
            padding-left: 0px;
            spacing: 8px;

            Image {
                padding: 0px;
                source: @image-url("../../../assets/waveform.path.png");
                width: 24px;
                height: 24px;
            }

            Text {
                padding: 0px;
                text: "Some title";
                font-size: 24px;
                font-weight: 800;
            }
        }

        Rectangle {
            width: parent.width;
            height: 1px;
            background: AppTheme.divider;
        }
    }
}

}