Text type alignment

Question

I have a QML element as follows:

    Rectangle {
        x: 0
        y: 0
        width: rightDrawer.width
        height: 35
        color: "#35FE45"
        Text {
            text: "Settings"
            font.pixelSize: 19
            font.family: "AvantGarde-Medium"
            color: "#ffffff"
            smooth: true
            verticalAlignment: Text.AlignVCenter
        }
    }

Here despite me specifying the vertical alignment as align vertical centre, it still shows the text aligned to the top of the rectangle (see attached figure). I would like to align it to the vertical centre.

Solution 1

Add

anchors.verticalCenter: parent.verticalCenter 
anchors.left: parent.left

or

anchors.fill: parent

or

anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left

to you Text. It aligns it right, but you Text item itself is in the top left corner of it's parent.

Solution 2

Add These Lines:

anchors.verticalCenter: parent.verticalCenter 
anchors.left: parent.left
anchors.fill: parent

Comments

[Admin]

@Luca You'r welcome. You should check anchors documentation, it's short but very useful. doc.qt.io/qt-5/qtquick-positioning-anchors.html And it's much better that using layouts.

[Luca]

I will. Just discovered your code along with anchor.leftMargin does exactly what I needed :) This QML is some powerful stuff!

[Admin]

@Luca Or I just thought that the best solution would probably be anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left. It does not stretch Text with its parent.

[Luca]

This stretching thing is not a problem for me as my app is running full screen on an embedded device where the screen specs will never change but thanks for that :)

[Krzysztof Janiszewski]

Please don't post only code as an answer, but also include an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually of higher quality and are more likely to attract upvotes