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 <color> 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;
            }
        }
    }
}

[hunger]

Something like this:

component Main {
    HorizontalLayout {
        padding-left: 0px;
        spacing: 8px;

        Rectangle {
            width: 24px;
            height: 36px;
            background: blue;
        }

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

?