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?

[edit: Added missing coding tags ``` SGaist]

charlycoste

In my humble opinion, you should probably better post this question to the Qt Quick section as it is a question about QML.

SGaist

Moved, no need to duplicate posts

charlycoste

@ubik said:

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?

Actually, as the first picture is really schematic, I don't even understand what is the difference between what you want and what you get...

If you want it to be horizontally centered, it's seems good for me, by the way.
If you want it to be vertically centered, I don't understand why you didn't just add anchors.verticalCenter after anchors.horizontalCenter in your Grid element :

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