qtquick2 - QML: Center variable text and image -

i need horizonally center variable-length text (red box) , image (yellow box) in big box (green box). text shall wrap if not fit box.

existing 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     } } 

update:

actual running code , real screenshot showing problem:

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 , 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;         }     } } 

the white area top right green box in first picture. timer runs through 3 texts, real application do.

changing first parameter of math.min() 600 not change anything.

my set of hacks solve problem:

item {     // ...     text {         function escapehtml(text)         {             return text.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");         }          function tohtml(imageurl,text)         {             var textlines=escapehtml(text).replace(/\r?\n/,"\n").split("\n");             var retval="<center>";             retval=retval+'<table><tr>';             if (imageurl!="") {                 retval=retval+'<td rowspan="'+(textlines.length)+'"><img src="'+imageurl+'"></td>';                 retval=retval+'<td rowspan="'+(textlines.length)+'">&nbsp;</td>';             }             (var i=0; i<textlines.length; i++) {                 if (i>0) {                     retval=retval+"<tr>";                 }                 retval=retval+'<td>'+textlines[i]+'</td></tr>';             }             retval=retval+'</table>';             retval=retval+"</center>";             return retval;         }          anchors.fill: parent         verticalalignment: text.alignvcenter         textformat: text.richtext         text: tohtml("../img/pepper.png",qstr("heading"))     } } 

• <center> centers text in available space, not image (it stays left - bug!).
• <table> can centered <center>, , can contain image.
• wrapping not work expected, translated text returned qstr() has contain linebreaks @ right positions.
• tohtml() splits @ linebreaks , generates table rows that.
• the image needs table cell rowspan, or else image placed high relative text.
• and finally, verticalalignment: text.alignvcenter places of vertically centered -- except table borders luckily don't need. (if bored, add border=1 <table> tag.)

and no, html , css subset supported text.richtext not support vertical alignment. rendering engine behaves ancient browsers, have stack hacks , workarounds if still 1996.