Important: Please read the Qt Code of Conduct -

Center all Items to the middle of the screen

  • 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.topMargin: 5
            Image {
                     id: circleImage2
                     source: "circle2.png"
                     anchors.horizontalCenter: labelSteps.horizontalCenter
                     anchors.topMargin: 40
                     Text { anchors.centerIn: parent
                     font.pointSize: 48; text: accelerometer.distance}
            Label {
                id: labelDistance
                anchors.horizontalCenter: circleImage2.horizontalCenter
                anchors.topMargin: 5
                anchors { bottom: circleImage2.bottom; horizontalCenter: circleImage2.horizontalCenter }
                text: "km"


    It should look like that:

    But it looks like that:

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

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

  • @xargs1

    Where to put it? When i put

    anchors.verticalCenter: parent.verticalCenter

    in Grid, then i get this:

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

  • 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.

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

  • @xargs1

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

  • You can reference Screen.width and Screen.height.

Log in to reply