CODEWITHSUNDEEP
c++qtqml
uchar
uchar

Reputation: 2590

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

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 ?!

Upvotes: 5

Views: 1997

Answers (4)

mcchu
mcchu

Reputation: 3359

If you need to put something in the center of a block, specify the width (and height) of the block so the program can calculate the center position. For example, set the size of the text block to Screen size:

Text {
    id:textBrowser
    textFormat: Text.RichText
    width: Screen.width
    height: Screen.height
    text: "<p style=\"text-align:center\"><img src=\"Icons/TroopCards/ArchersCard.png\" /></p>
           <p style=\"text-align:center\">Some text at middle</p>";
}

And the image is now centered in your window (since your ApplicationWindow has the same width and height).

......No, it doesn't. Maybe there are some bugs in the rich text processor, or maybe it does not support image alignment in rich text at all. If you really want to use rich text to put an image in the center of the text block, here is a simple workaround: put an &nbsp; (space character) before your image tag.

Text {
    id:textBrowser
    textFormat: Text.RichText
    width: Screen.width
    height: Screen.height
    text: "<p style=\"text-align:center\">&nbsp;<img src=\"Icons/TroopCards/ArchersCard.png\" /></p>
           <p style=\"text-align:center\">Some text at middle</p>";
}

And the image is almost in the center of the text block.

Upvotes: 2

admirableadmin
admirableadmin

Reputation: 2759

For the anchors you could calculate the horizontal center offset of Text element by using the window width (main) minus the surrounding element (parent) width divided by two. So, add these three lines:

horizontalAlignment: Text.AlignHCenter
anchors.horizontalCenterOffset: (main.width - parent.width) / 2
anchors.horizontalCenter: parent.horizontalCenter

Result:

result

Upvotes: 0

timocov
timocov

Reputation: 1166

Try this as text parameter of TextArea (Text with textFormat: Text.RichText):

<p align=\"center\"><img src=\"Icons/TroopCards/ArchersCard.png\"/></p>
<p style=\"text-align:center\">Some text at middle</p>

Upvotes: 0

synacker
synacker

Reputation: 1782

Try this:

Text {
            id:textBrowser
            anchors.horizontalCenter: parent.hrizontalcenter
            textFormat: Text.RichText
            text: "<p style=\"text-align:center\">
                      <img  src=\"Icons/TroopCards/ArchersCard.png\" />
                   </p>
                   <p style=\"text-align:center\">Some text at middle</p>";
        }

Upvotes: 0

Related Questions