title: QML: Center variable text and image
body: <p>I need to horizonally center a variable-length text (red box) and an image (yellow box) in a big box (green box). The text shall wrap if it does not fit the box.</p>
  
  <p><a href="https://i.stack.imgur.com/qHuG3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qHuG3.png" alt="drawing"></a></p>
  
  <p>Existing code:</p>
  
  <pre><code>Item {
      id: bigBox
      x: 255
      y: 0
      width: 800
      height: 100
      Image {
          id: imageBox
          source: "image.png"
          width: 52
          height: 46
          anchors.left: parent.left
          anchors.leftMargin: 12
          anchors.verticalCenter: parent.verticalCenter
          horizontalAlignment: Image.AlignLeft
          verticalAlignment: Image.AlignVCenter
          fillMode: Image.Pad
      }
  
      Text {
          id: textBox
          anchors.left: symbol.right
          anchors.leftMargin: 12
          anchors.right: parent.right
          anchors.verticalCenter: parent.verticalCenter
          text: qsTr("heading text")
          font.pixelSize: 36
          font.bold: true
          horizontalAlignment: Text.AlignCenter
      }
  }
  </code></pre>
  
  <p><strong>Update:</strong> </p>
  
  <p>Actual running code and a real screenshot showing the problem:</p>
  
  <pre><code>import QtQuick 2.0
  
  Rectangle {
      id: mask
      x: 0
      y: 0
      width: 800
      height: 430
      color: "#FFFFFF"
      property int pageState: 0
      Rectangle {
          x: 0
          y: 0
          width: 111
          height: 100
          color: "#0000FF"
      }
      Item {
          id: whitespace
          x: 117
          y: 0
          width: 800-x
          height: 100
          Row {
              anchors.centerIn: parent
              Image {
                  id: symbol
                  source: "../img/pepper.png"
                  width: 52
                  height: 46
                  anchors.verticalCenter: parent.verticalCenter
                  fillMode: Image.Pad
              }
              Text {
                  id: heading
                  property var texts: ["Active Blabla","Active Blaaaaaaah Blaaaah ","Active Blabla and Blaaaaaaah Blaaaah"]
                  anchors.verticalCenter: parent.verticalCenter
                  color: "#333191"
                  text: texts[pageState]
                  font.family: "Liberation Sans"
                  font.pixelSize: 36
                  font.bold: true
                  horizontalAlignment: Text.AlignLeft
                  verticalAlignment: Text.AlignVCenter
                  wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                  textFormat: Text.PlainText
                  width: Math.min(150,contentWidth)
              }
          }
      }
      Rectangle {
          id: stage
          x: 0
          y: 106
          width: parent.width
          height: parent.height-y
          color: "#FFFF00"
      }
      Timer {
          interval: 1000 // milliseconds
          triggeredOnStart: true
          repeat: true
          running: true
          onTriggered: {
              pageState=(pageState+1)%3;
          }
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/DANXF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DANXF.png" alt="Screenshot"></a></p>
  
  <p>The white area top right is the green box in the first picture. The timer simply runs through the three texts, like the real application would do.</p>
  
  <p>Changing the first parameter of Math.min() to 600 does not change anything.</p>