Can't center text in the Rectangle

iliya faramarzi

Hi,
I have a Rectangle with a text inside of that and i want to make it centrize at the Rectangle. this is my Code:

RowLayout{
    Layout.fillWidth: true
    Rectangle{
        width: 35
        height: 35
        radius: 35
        color: "#D9D9D9"
        Text {
            text: qsTr("+")
            font.family: regularFont.name
            font.pixelSize: 25
            fontSizeMode: Text.Fit
            wrapMode: Text.WordWrap
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }
}

and this is how it looks like:

how can i make it centrize?

Markkyboy

The text ("+") is central to the Rectangle (grey circle) from what I can see.

Otherwise, you need to create another Rectangle, make it black and place the original Rectangle (grey circle) inside the black Rectangle. For now, I've omitted RowLayout;

// black rectangle
Rectangle {
    width: 135
    height: 235
    color: "black"

    // grey circle with "+" in the center
    Rectangle{
        width: 35
        height: width
        radius: width/2
        color: "#D9D9D9"
        anchors.centerIn: parent

        // text "+"
        Text {
            text: qsTr("+")
            font.pixelSize: 25
            anchors.centerIn: parent
        }
    }
}