How to center a picture using html source in RichText of QML?
<p>I want to center a picture in QML using <code>RichText</code> . I tried <code>&lt;center&gt;</code> tag and <code>text-align</code> attribute. none of them works.</p>

<pre><code>import QtQuick 2.0
import QtQml.Models 2.1
import QtQuick.Window 2.2
import QtQuick.Controls 1.2


ApplicationWindow{
    width: Screen.width; height: Screen.height; color: "#d5d6d8"
    visible:true
    Rectangle {
        color: "#33cc94"
        width: parent.width; height: parent.height
        id : main

        Flickable {
            id:textArea
            anchors.fill: parent
            contentHeight: textBrowser.height
            contentWidth: textBrowser.width
            enabled: false
            Text {
                id:textBrowser
                textFormat: Text.RichText
               // visible:false
             //   text: "&lt;center&gt;&lt;img src=\"Icons/TroopCards/ArchersCard.png\"  /&gt;&lt;/center&gt;";
                text: "&lt;p style=\"text-align:center\"&gt;
                          &lt;img  src=\"Icons/TroopCards/ArchersCard.png\" /&gt;
                       &lt;/p&gt;
                       &lt;p style=\"text-align:center\"&gt;Some text at middle&lt;/p&gt;";
            }
        }
    }
}
</code></pre>

<p>And result : </p>

<p><a href="https://i.stack.imgur.com/9IPqJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9IPqJ.png" alt="Left aligned image!"></a></p>

<p>How can I center an image using html in QML ?!</p>