How to center a picture using html source in RichText of QML?

Viewed 1596

I want to center a picture in QML using RichText . I tried <center> tag and text-align attribute. none of them works.

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: "<center><img src=\"Icons/TroopCards/ArchersCard.png\"  /></center>";
                text: "<p style=\"text-align:center\">
                          <img  src=\"Icons/TroopCards/ArchersCard.png\" />
                       </p>
                       <p style=\"text-align:center\">Some text at middle</p>";
            }
        }
    }
}

And result :

Left aligned image!

How can I center an image using html in QML ?!

4 Answers
Related