Centering text within a container and stretching + cropping at the same time

Phaser 3
1

I’m trying to make a menu button with this image: panel_wood

Here’s what I did:

this.scene.load.image("panel", "panel_wood.png");
    this.scene.add.container(200, 200, [
        this.scene.add.image(0, 0, "panel").setCrop(0, 0, 6, 64), // Left edge piece
        this.scene.add.image(0, 0, "panel").setCrop(6, 0, 52, 64), // Center piece
        this.scene.add.image(52, 0, "panel").setCrop(6, 0, 52, 64), // Center piece
        this.scene.add.image(104, 0, "panel").setCrop(6, 0, 52, 64), // Center piece
        this.scene.add.image(104, 0, "panel").setCrop(58, 0, 64, 64), // Right edge piece
        this.scene.add.text(0, 0, "Hello", { fontSize: "24px", fill: "#fff" }).setOrigin(0.5)
    ]);

A) How can I get the text to horizontally center within the container?

B) Is there a better way to create the button? Cropping the same image multiple times seems inefficient.

I tried something like this:

this.scene.add.container(200, 200, [
        this.scene.add.image(0, 10, "panel").setCrop(0, 0, 6, 64), // Left edge piece
        this.scene.add.image(6, 20, "panel").setCrop(6, 0, 52, 64).setDisplaySize(104, 64), // Center piece
        this.scene.add.image(52, 30, "panel").setCrop(58, 0, 64, 64), // Right edge piece
        this.scene.add.text(0, 0, "Hello", { fontSize: "24px", fill: "#fff" }).setOrigin(0.5)
    ]);

But it seems the setDisplaySize or displayWidth also scales the cropping, which makes it impossible to make dynamic.

2