Horizontally centering a rectangle in another rectangle

[Binary91]

Hi,

I’m trying to horizontally center a rectangle in a window. This is my code:

Window
    {
      visible: true
      width: 400
      height: 600
 
      Rectangle
      {
        id: rectLayout
        anchors.fill: parent
 
        Rectangle
        {
          width: 90
          height: 25
          anchors.top: rectLayout.top
          anchors.left: rectLayout.left
          anchorrs.topMargin: 5
          anchors.horizontalCenter: rectLayout.horizontalCenter
        }
      }
    }

Window
    {
      visible: true
      width: 400
      height: 600
     
      Rectangle
      {
        id: rectLayout
        anchors.fill: parent
     
        Rectangle
        {
          width: 90
          height: 25
          anchors.top: rectLayout.top
          anchors.left: rectLayout.left
          anchorrs.topMargin: 5
          anchors.horizontalCenter: rectLayout.horizontalCenter
        }
      }
    }

To copy to clipboard, switch view to plain text mode 

The wanted effect is a rectangle with top margin to the window of 5px and horizontally centered with a total width of 90 and height of 25 pixels.

The problem is, that using anchors.horizontalCenter: rectLayout.horizontalCenter results in streching the rectangle to the whole width of the window…

Does anybody know how I can avoid this effect?

Thank you in anticipation :-)

[wysota]

Your anchor definitions are contradictory. If you want to horizontally center an item, you cannot set its left anchor.

[Binary91]

Hi,
oh yes that was the problem! Thank you! :-)