Center all Items to the middle of the screen

[ubik]

Helo,

My Code is the following:

Grid {
id: myGrid
rows: 4
columns: 1
width: parent.width
height: partent.height
spacing: 50
anchors.horizontalCenter: parent.horizontalCenter

        Image {
                 id: circleImage
                 source: "circle.png"
                  // the CircleCollider has its origin in the center, not top-left
                 anchors.horizontalCenter: parent.horizontalCenter
                 Text { anchors.centerIn: parent
                        font.pointSize: 48; text: accelerometer.steps }
        }

        Label {
            id: labelSteps
            text: "Schritte"

            anchors.horizontalCenter: circleImage.horizontalCenter
            anchors.top: circleImage.bottom
            anchors.topMargin: 5
        }

        Image {
                 id: circleImage2
                 source: "circle2.png"
                 anchors.horizontalCenter: labelSteps.horizontalCenter
                 anchors.top: labelSteps.bottom
                 anchors.topMargin: 40
                 Text { anchors.centerIn: parent
                 font.pointSize: 48; text: accelerometer.distance}
        }

        Label {
            id: labelDistance
            anchors.horizontalCenter: circleImage2.horizontalCenter
            anchors.top: circleImage2.bottom
            anchors.topMargin: 5
            anchors { bottom: circleImage2.bottom; horizontalCenter: circleImage2.horizontalCenter }
            text: "km"
        }

}

It should look like that:

http://fs1.directupload.net/images/150818/qiufx8st.png

But it looks like that:

http://www.bilder-upload.eu/show.php?file=31e598-1439891706.png

How can I center all Items to the middle of the screen?

[xargs1]

anchors.verticalCenter: parent.verticalCenter? Or anchors.centerIn: parent?

[ubik]

@xargs1

Where to put it? When i put

anchors.verticalCenter: parent.verticalCenter

in Grid, then i get this:

http://fs1.directupload.net/images/150818/bw2wo9na.png

[xargs1]

What is the height of the parent? If the parent's height is greater than the screen size, verticalCenter won't work.

[ubik]

The height of the parent isn't set.

Well, when I put "anchors.verticalCenter: parent.verticalCenter" in the grid, it does center vertically the first image. But the other elements are just moving down under the first image.

[xargs1]

I don't think you can center in something that doesn't have a height.

[ubik]

@xargs1

So, how to set width and height with the screen size?

[xargs1]

You can reference Screen.width and Screen.height.